These will be automatically terminated as soon as the work is done. It will spawn a new worker every time.
Returns anything it receives in a background process. Useful when dealing with heavy DOM manipulation (i.e. Infinite scroll). It greatly improves initial page load speed, especially on mobiles.
var images = ['foo.png', 'bar.png', 'twiz.png', 'foozle.png', 'barzle.png', 'twizle.png']
Architect.proxy(images, function(data) {
console.log(data)
// => ['foo.png', 'bar.png', 'twiz.png', 'foozle.png', 'barzle.png', 'twizle.png']
data.forEach(function(image) {
img = document.createElement('img')
img.src = image
document.body.appendChild(img)
})
})
Alias for Architect.work(data, 'proxy', callback)
.
Makes an Ajax request in a background process.
Architect.ajax('/users/1', function(data) {
console.log(data);
// => { id: 1, name: 'Foo', email: '[email protected]' }
})
Alias for Architect.work(url, 'ajax', callback)
.
Makes a JSONP request in a background process. Do not add ?callback=foo
to your URL, Architect will handle JSONP callbacks himself. See the request Architect makes.
Architect.jsonp('https://api.github.com/users/etiennelem', function(data) {
console.log(data);
// => { meta: { status: 200, }, data: { login: 'EtienneLem', company: 'Heliom', } }
})
Alias for Architect.work(url, 'jsonp', callback)
.
These need to be manually terminated when the work is done. The same worker can therefore be reused many times with different data.
var images, jobName, imagesCount
images = ['foo.png', 'bar.png', 'twiz.png', 'foozle.png', 'barzle.png', 'twizle.png']
jobName = 'appendImages'
imagesCount = 0
images.forEach(function(image) {
Architect.proxyOn(jobName, image, function(data) {
imagesCount++
img = document.createElement('img')
img.src = data
document.body.appendChild(img)
if (imagesCount == images.length) { Architect.endJob(jobName) }
})
})
Alias for Architect.workOn(jobName, data, 'proxy', callback)
.
var totalPages, jobName, queryApi
totalPages = 10
jobName = 'getUsers'
queryApi = function(page) {
Architect.ajaxOn(jobName, '/users?page=' + page, function(data) {
// [Add DOM elements, do your thing ;)]
if (page == totalPages) {
// Manually terminate the 'getUsers' ajax worker
Architect.endJob(jobName)
console.log('Done')
} else {
// Reuse the same worker
queryApi(page + 1)
}
})
}
queryApi(1)
Alias for Architect.workOn(jobName, url, 'ajax', callback)
.
Architect.jsonpOn('profile', 'https://api.github.com/users/etiennelem', function(data) {
console.log(data);
// => { meta: { status: 200, }, data: { login: 'EtienneLem', company: 'Heliom', } }
Architect.endJob('profile')
})
Alias for Architect.workOn(jobName, url, 'jsonp', callback)
.
You can use Architect with your own workers. Just remember that if you want to be compatible with all the old browsers you need to optionally provide a fallback function that replicates your workers work.
// workers/foozle.js
addEventListener('message', function(e) {
data = (e.data + 'zle').toUpperCase()
postMessage(data)
})
// application.js
// Replicates workers/foozle.js, but in the main thread
var foozleFallback = function(data) {
return (data + 'zle').toUpperCase()
}
Architect.workFrom('workers/foozle.js', 'foo', foozleFallback, function(data) {
console.log(data)
// => FOOZLE
})
gem 'architect'
to your Gemfile.//= require architect
to your JavaScript manifest file (usually found at app/assets/javascripts/application.js
).Youll need to serve the worker files at /architect
(i.e. http://foo.com/architect/proxy_worker.min.js
) and manually include architect.min.js to your HTML pages. Architect is also hosted on cdnjs.com.
You can also specify any path you want to serve the workers from.
Architect.setupWorkersPath('fake/path')
Architect.proxy('Foo', function(data) {
// => Uses http://yourdomain.com/fake/path/proxy_worker.min.js
})
Run the rake test
task.