SlideShare una empresa de Scribd logo
1 de 53
AJS: Asynchronous
Templating in Node
(completing the async puzzle)
Who am I?
Evan Owen
Senior Developer @ LifeKraze

Lover of Ruby, JS, Redis, good
design and asynchronous code.
History of Templating
Old-school PHP: the template == your app
History of Templating
Old-school PHP: the template == your app
already flushed
History of Templating
Old-school PHP: the template == your app
already flushed




     blocking
OO PHP + template == worse
OO PHP + template == worse



   blocking
OO PHP + template == worse



   blocking




  nothing flushed!
Ruby + ERB template == just as bad
Ruby + ERB template == just as bad
          blocking
Ruby + ERB template == just as bad
          blocking




     nothing flushed!
Rails 3.1 Automatic Flushing == better
Rails 3.1 Automatic Flushing == better


<head> flushed
Rails 3.1 Automatic Flushing == better


<head> flushed

                             still blocking
Rails 3.1 Automatic Flushing == better


<head> flushed

                             still blocking




                            other db calls
                              must wait
What about Node?
  It’s non-blocking, right?

         WRONG.

Node will block (per-request)
at your first blocking function.
Node + EJS == not enough
Node + EJS == not enough



non-blocking
Node + EJS == not enough



non-blocking


      non-blocking
Node + EJS == not enough



  non-blocking


            non-blocking


blocking!
Node + existing async libs == frustrating

      node-asyncEJS
Node + existing async libs == frustrating

      node-asyncEJS




                        things to
                       worry about
Node + existing async libs == frustrating

      nun
Node + existing async libs == frustrating

      nun
                   more things to
                    worry about
Node + existing async libs == frustrating

      nun
                   more things to
                    worry about




                     no logic allowed,
                      loops are hard
What we need —
What we need —
1. Familiar, standard syntax
What we need —
1. Familiar, standard syntax
2. Nothing extra to learn or think about
What we need —
1. Familiar, standard syntax
2. Nothing extra to learn or think about
3. Completely non-blocking, able to
 continue rendering while waiting for
 callbacks
What we need —
1. Familiar, standard syntax
2. Nothing extra to learn or think about
3. Completely non-blocking, able to
 continue rendering while waiting for
 callbacks
4. Fast
Node + AJS == async, easy
Node + AJS == async, easy


              superset of JS
                 (similar to EJS)
Node + AJS == async, easy


              superset of JS
                  (similar to EJS)




             use callbacks naturally
               (can/should be defined in controller)
Node + AJS == async, easy


              superset of JS
                  (similar to EJS)




             use callbacks naturally
               (can/should be defined in controller)




               include partials
How AJS works —
How AJS works —
1. Parse source to an abstract syntax
 tree (AST)
How AJS works —
1. Parse source to an abstract syntax
 tree (AST)
2. Add “futures” hooks around callbacks
How AJS works —
1. Parse source to an abstract syntax
 tree (AST)
2. Add “futures” hooks around callbacks
3. Recompile and cache optimized JS
How AJS works —
1. Parse source to an abstract syntax
 tree (AST)
2. Add “futures” hooks around callbacks
3. Recompile and cache optimized JS
4. Execute code inside a VM that
 manages and handles async callbacks
How callbacks are handled —
How callbacks are handled —
1. At the exact spot a callback is passed to
 its async function, we create a “future”
 buffer.
How callbacks are handled —
1. At the exact spot a callback is passed to
 its async function, we create a “future”
 buffer.

2. We continue executing the template,
 flushing everything up until a callback that
 we’re still waiting on.
How callbacks are handled —
1. At the exact spot a callback is passed to
 its async function, we create a “future”
 buffer.

2. We continue executing the template,
 flushing everything up until a callback that
 we’re still waiting on.

3. When each callback returns, we fill in its
 buffer and continue flushing down the page
 as we can.
JS Compatibility —
Should be mostly complete, can
correctly compile embedded jQuery
and underscore.js source already.
(no they aren’t templates, but they are complex JS)
What about
performance? —
What about
performance? —
Parses ~40-50,000 lines/sec uncached.
Good, not great (should improve).
What about
performance? —
Parses ~40-50,000 lines/sec uncached.
Good, not great (should improve).

But AJS can render while Node
waits on your DB calls, and page
loads will feel faster because
<head> resources aren’t blocked.
Current limitations —
Current limitations —
1. Since callbacks are detected and at runtime,
 callbacks can’t be nested. There may be
 some ways around this, but we may not want
 to encourage it...
Current limitations —
1. Since callbacks are detected and at runtime,
 callbacks can’t be nested. There may be
 some ways around this, but we may not want
 to encourage it...

2. There’s no layout nesting built into the
 middleware.
Current limitations —
1. Since callbacks are detected and at runtime,
 callbacks can’t be nested. There may be
 some ways around this, but we may not want
 to encourage it...

2. There’s no layout nesting built into the
 middleware.

3. Others...
My inspiration —




Your welcome, Ryan.
How to get it —
1 - npm install ajs
2 - github.com/kainosnoema/ajs

Submit issues, fork and improve!

Más contenido relacionado

La actualidad más candente

Server Side Apocalypse, JS
Server Side Apocalypse, JSServer Side Apocalypse, JS
Server Side Apocalypse, JSMd. Sohel Rana
 
ConvergeSE: We Will All Be Game Developers
ConvergeSE: We Will All Be Game DevelopersConvergeSE: We Will All Be Game Developers
ConvergeSE: We Will All Be Game DevelopersHunter Loftis
 
Node.js: Whats the Big Deal? Presented and JS Meetup Chicago
Node.js: Whats the Big Deal? Presented and JS Meetup ChicagoNode.js: Whats the Big Deal? Presented and JS Meetup Chicago
Node.js: Whats the Big Deal? Presented and JS Meetup ChicagoAziz Ali
 
下吧开发总结
下吧开发总结下吧开发总结
下吧开发总结Night Sailer
 
Async programming with Observable
Async programming with ObservableAsync programming with Observable
Async programming with ObservableSeydou N Ba
 
Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2동수 장
 
Smalltalk in the pocket - Building applications for the iPhone
Smalltalk in the pocket - Building applications for the iPhoneSmalltalk in the pocket - Building applications for the iPhone
Smalltalk in the pocket - Building applications for the iPhoneEsteban Lorenzano
 

La actualidad más candente (8)

Server Side Apocalypse, JS
Server Side Apocalypse, JSServer Side Apocalypse, JS
Server Side Apocalypse, JS
 
ConvergeSE: We Will All Be Game Developers
ConvergeSE: We Will All Be Game DevelopersConvergeSE: We Will All Be Game Developers
ConvergeSE: We Will All Be Game Developers
 
Node.js: Whats the Big Deal? Presented and JS Meetup Chicago
Node.js: Whats the Big Deal? Presented and JS Meetup ChicagoNode.js: Whats the Big Deal? Presented and JS Meetup Chicago
Node.js: Whats the Big Deal? Presented and JS Meetup Chicago
 
下吧开发总结
下吧开发总结下吧开发总结
下吧开发总结
 
Async programming with Observable
Async programming with ObservableAsync programming with Observable
Async programming with Observable
 
Node presentation
Node presentationNode presentation
Node presentation
 
Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2
 
Smalltalk in the pocket - Building applications for the iPhone
Smalltalk in the pocket - Building applications for the iPhoneSmalltalk in the pocket - Building applications for the iPhone
Smalltalk in the pocket - Building applications for the iPhone
 

Similar a AJS — Asynchronous Templating in Node

Asynchronous programming - .NET Way
Asynchronous programming - .NET WayAsynchronous programming - .NET Way
Asynchronous programming - .NET WayBishnu Rawal
 
Xtext beyond the defaults - how to tackle performance problems
Xtext beyond the defaults -  how to tackle performance problemsXtext beyond the defaults -  how to tackle performance problems
Xtext beyond the defaults - how to tackle performance problemsHolger Schill
 
Hippo get together presentation solr integration
Hippo get together presentation   solr integrationHippo get together presentation   solr integration
Hippo get together presentation solr integrationHippo
 
Work Queues
Work QueuesWork Queues
Work Queuesciconf
 
Gearman and CodeIgniter
Gearman and CodeIgniterGearman and CodeIgniter
Gearman and CodeIgniterErik Giberti
 
Asynchronous Awesome
Asynchronous AwesomeAsynchronous Awesome
Asynchronous AwesomeFlip Sasser
 
Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks ...
Updates on Offline: “My AppCache won’t come back” and  “ServiceWorker Tricks ...Updates on Offline: “My AppCache won’t come back” and  “ServiceWorker Tricks ...
Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks ...Natasha Rooney
 
Ups and downs of enterprise Java app in a research setting
Ups and downs of enterprise Java app in a research settingUps and downs of enterprise Java app in a research setting
Ups and downs of enterprise Java app in a research settingCsaba Toth
 
Site Performance - From Pinto to Ferrari
Site Performance - From Pinto to FerrariSite Performance - From Pinto to Ferrari
Site Performance - From Pinto to FerrariJoseph Scott
 
ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in...
 ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in... ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in...
ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in...Saurabh Nanda
 
The art of concurrent programming
The art of concurrent programmingThe art of concurrent programming
The art of concurrent programmingIskren Chernev
 
Real time analytics using Hadoop and Elasticsearch
Real time analytics using Hadoop and ElasticsearchReal time analytics using Hadoop and Elasticsearch
Real time analytics using Hadoop and ElasticsearchAbhishek Andhavarapu
 
Search and analyze your data with elasticsearch
Search and analyze your data with elasticsearchSearch and analyze your data with elasticsearch
Search and analyze your data with elasticsearchAnton Udovychenko
 
Debugging ansible modules
Debugging ansible modulesDebugging ansible modules
Debugging ansible modulesaleonhardt
 
Ruby thread safety first
Ruby thread safety firstRuby thread safety first
Ruby thread safety firstEmily Stolfo
 
Need for Async: Hot pursuit for scalable applications
Need for Async: Hot pursuit for scalable applicationsNeed for Async: Hot pursuit for scalable applications
Need for Async: Hot pursuit for scalable applicationsKonrad Malawski
 
Building Asynchronous Applications
Building Asynchronous ApplicationsBuilding Asynchronous Applications
Building Asynchronous ApplicationsJohan Edstrom
 
Ruby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developerRuby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developergicappa
 
Zero ETL analytics with LLAP in Azure HDInsight
Zero ETL analytics with LLAP in Azure HDInsightZero ETL analytics with LLAP in Azure HDInsight
Zero ETL analytics with LLAP in Azure HDInsightAshish Thapliyal
 
Parallel Programming: Beyond the Critical Section
Parallel Programming: Beyond the Critical SectionParallel Programming: Beyond the Critical Section
Parallel Programming: Beyond the Critical SectionTony Albrecht
 

Similar a AJS — Asynchronous Templating in Node (20)

Asynchronous programming - .NET Way
Asynchronous programming - .NET WayAsynchronous programming - .NET Way
Asynchronous programming - .NET Way
 
Xtext beyond the defaults - how to tackle performance problems
Xtext beyond the defaults -  how to tackle performance problemsXtext beyond the defaults -  how to tackle performance problems
Xtext beyond the defaults - how to tackle performance problems
 
Hippo get together presentation solr integration
Hippo get together presentation   solr integrationHippo get together presentation   solr integration
Hippo get together presentation solr integration
 
Work Queues
Work QueuesWork Queues
Work Queues
 
Gearman and CodeIgniter
Gearman and CodeIgniterGearman and CodeIgniter
Gearman and CodeIgniter
 
Asynchronous Awesome
Asynchronous AwesomeAsynchronous Awesome
Asynchronous Awesome
 
Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks ...
Updates on Offline: “My AppCache won’t come back” and  “ServiceWorker Tricks ...Updates on Offline: “My AppCache won’t come back” and  “ServiceWorker Tricks ...
Updates on Offline: “My AppCache won’t come back” and “ServiceWorker Tricks ...
 
Ups and downs of enterprise Java app in a research setting
Ups and downs of enterprise Java app in a research settingUps and downs of enterprise Java app in a research setting
Ups and downs of enterprise Java app in a research setting
 
Site Performance - From Pinto to Ferrari
Site Performance - From Pinto to FerrariSite Performance - From Pinto to Ferrari
Site Performance - From Pinto to Ferrari
 
ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in...
 ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in... ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in...
ABRIDGED VERSION - Joys & frustrations of putting 34,000 lines of Haskell in...
 
The art of concurrent programming
The art of concurrent programmingThe art of concurrent programming
The art of concurrent programming
 
Real time analytics using Hadoop and Elasticsearch
Real time analytics using Hadoop and ElasticsearchReal time analytics using Hadoop and Elasticsearch
Real time analytics using Hadoop and Elasticsearch
 
Search and analyze your data with elasticsearch
Search and analyze your data with elasticsearchSearch and analyze your data with elasticsearch
Search and analyze your data with elasticsearch
 
Debugging ansible modules
Debugging ansible modulesDebugging ansible modules
Debugging ansible modules
 
Ruby thread safety first
Ruby thread safety firstRuby thread safety first
Ruby thread safety first
 
Need for Async: Hot pursuit for scalable applications
Need for Async: Hot pursuit for scalable applicationsNeed for Async: Hot pursuit for scalable applications
Need for Async: Hot pursuit for scalable applications
 
Building Asynchronous Applications
Building Asynchronous ApplicationsBuilding Asynchronous Applications
Building Asynchronous Applications
 
Ruby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developerRuby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developer
 
Zero ETL analytics with LLAP in Azure HDInsight
Zero ETL analytics with LLAP in Azure HDInsightZero ETL analytics with LLAP in Azure HDInsight
Zero ETL analytics with LLAP in Azure HDInsight
 
Parallel Programming: Beyond the Critical Section
Parallel Programming: Beyond the Critical SectionParallel Programming: Beyond the Critical Section
Parallel Programming: Beyond the Critical Section
 

AJS — Asynchronous Templating in Node

  • 1. AJS: Asynchronous Templating in Node (completing the async puzzle)
  • 2. Who am I? Evan Owen Senior Developer @ LifeKraze Lover of Ruby, JS, Redis, good design and asynchronous code.
  • 3. History of Templating Old-school PHP: the template == your app
  • 4. History of Templating Old-school PHP: the template == your app already flushed
  • 5. History of Templating Old-school PHP: the template == your app already flushed blocking
  • 6. OO PHP + template == worse
  • 7. OO PHP + template == worse blocking
  • 8. OO PHP + template == worse blocking nothing flushed!
  • 9. Ruby + ERB template == just as bad
  • 10. Ruby + ERB template == just as bad blocking
  • 11. Ruby + ERB template == just as bad blocking nothing flushed!
  • 12. Rails 3.1 Automatic Flushing == better
  • 13. Rails 3.1 Automatic Flushing == better <head> flushed
  • 14. Rails 3.1 Automatic Flushing == better <head> flushed still blocking
  • 15. Rails 3.1 Automatic Flushing == better <head> flushed still blocking other db calls must wait
  • 16. What about Node? It’s non-blocking, right? WRONG. Node will block (per-request) at your first blocking function.
  • 17. Node + EJS == not enough
  • 18. Node + EJS == not enough non-blocking
  • 19. Node + EJS == not enough non-blocking non-blocking
  • 20. Node + EJS == not enough non-blocking non-blocking blocking!
  • 21. Node + existing async libs == frustrating node-asyncEJS
  • 22. Node + existing async libs == frustrating node-asyncEJS things to worry about
  • 23. Node + existing async libs == frustrating nun
  • 24. Node + existing async libs == frustrating nun more things to worry about
  • 25. Node + existing async libs == frustrating nun more things to worry about no logic allowed, loops are hard
  • 27. What we need — 1. Familiar, standard syntax
  • 28. What we need — 1. Familiar, standard syntax 2. Nothing extra to learn or think about
  • 29. What we need — 1. Familiar, standard syntax 2. Nothing extra to learn or think about 3. Completely non-blocking, able to continue rendering while waiting for callbacks
  • 30. What we need — 1. Familiar, standard syntax 2. Nothing extra to learn or think about 3. Completely non-blocking, able to continue rendering while waiting for callbacks 4. Fast
  • 31. Node + AJS == async, easy
  • 32. Node + AJS == async, easy superset of JS (similar to EJS)
  • 33. Node + AJS == async, easy superset of JS (similar to EJS) use callbacks naturally (can/should be defined in controller)
  • 34. Node + AJS == async, easy superset of JS (similar to EJS) use callbacks naturally (can/should be defined in controller) include partials
  • 36. How AJS works — 1. Parse source to an abstract syntax tree (AST)
  • 37. How AJS works — 1. Parse source to an abstract syntax tree (AST) 2. Add “futures” hooks around callbacks
  • 38. How AJS works — 1. Parse source to an abstract syntax tree (AST) 2. Add “futures” hooks around callbacks 3. Recompile and cache optimized JS
  • 39. How AJS works — 1. Parse source to an abstract syntax tree (AST) 2. Add “futures” hooks around callbacks 3. Recompile and cache optimized JS 4. Execute code inside a VM that manages and handles async callbacks
  • 40. How callbacks are handled —
  • 41. How callbacks are handled — 1. At the exact spot a callback is passed to its async function, we create a “future” buffer.
  • 42. How callbacks are handled — 1. At the exact spot a callback is passed to its async function, we create a “future” buffer. 2. We continue executing the template, flushing everything up until a callback that we’re still waiting on.
  • 43. How callbacks are handled — 1. At the exact spot a callback is passed to its async function, we create a “future” buffer. 2. We continue executing the template, flushing everything up until a callback that we’re still waiting on. 3. When each callback returns, we fill in its buffer and continue flushing down the page as we can.
  • 44. JS Compatibility — Should be mostly complete, can correctly compile embedded jQuery and underscore.js source already. (no they aren’t templates, but they are complex JS)
  • 46. What about performance? — Parses ~40-50,000 lines/sec uncached. Good, not great (should improve).
  • 47. What about performance? — Parses ~40-50,000 lines/sec uncached. Good, not great (should improve). But AJS can render while Node waits on your DB calls, and page loads will feel faster because <head> resources aren’t blocked.
  • 49. Current limitations — 1. Since callbacks are detected and at runtime, callbacks can’t be nested. There may be some ways around this, but we may not want to encourage it...
  • 50. Current limitations — 1. Since callbacks are detected and at runtime, callbacks can’t be nested. There may be some ways around this, but we may not want to encourage it... 2. There’s no layout nesting built into the middleware.
  • 51. Current limitations — 1. Since callbacks are detected and at runtime, callbacks can’t be nested. There may be some ways around this, but we may not want to encourage it... 2. There’s no layout nesting built into the middleware. 3. Others...
  • 52. My inspiration — Your welcome, Ryan.
  • 53. How to get it — 1 - npm install ajs 2 - github.com/kainosnoema/ajs Submit issues, fork and improve!

Notas del editor

  1. \n
  2. \n
  3. We haven&amp;#x2019;t progressed since the days of inline PHP, in fact we&amp;#x2019;ve regressed\n Node&amp;#x2019;s non-blocking architecture is being handicapped by archaic templating conventions\n We need something completely new (at least under the hood)\n
  4. We haven&amp;#x2019;t progressed since the days of inline PHP, in fact we&amp;#x2019;ve regressed\n Node&amp;#x2019;s non-blocking architecture is being handicapped by archaic templating conventions\n We need something completely new (at least under the hood)\n
  5. \n
  6. \n
  7. \n
  8. \n
  9. From the end user&amp;#x2019;s perspective, we&amp;#x2019;re finally back the experience we had with inline PHP.\nRegardless, we&amp;#x2019;re stuck with Ruby&amp;#x2019;s blocking IO calls. \n
  10. From the end user&amp;#x2019;s perspective, we&amp;#x2019;re finally back the experience we had with inline PHP.\nRegardless, we&amp;#x2019;re stuck with Ruby&amp;#x2019;s blocking IO calls. \n
  11. From the end user&amp;#x2019;s perspective, we&amp;#x2019;re finally back the experience we had with inline PHP.\nRegardless, we&amp;#x2019;re stuck with Ruby&amp;#x2019;s blocking IO calls. \n
  12. Somehow we have this assumption that whatever we write in Node will be non-blocking.\nUnfortunately this isn&amp;#x2019;t true on a per-request level... if you have a blocking function, Node blocks.\n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. The uncached performance is only relevant on the first page load.\nAfter that performance is MUCH better, and will only improve.\n
  35. The uncached performance is only relevant on the first page load.\nAfter that performance is MUCH better, and will only improve.\n
  36. 2. Thought of this last night actually...\n
  37. 2. Thought of this last night actually...\n
  38. 2. Thought of this last night actually...\n
  39. Obviously Ryan was joking around, but in threory AJS could be used as\nan asynchronous &amp;#x201C;PHP&amp;#x201D; by simply serving up AJS files, mapping URIs\nto a directory structure. Not that you&amp;#x2019;d want to.\n
  40. \n