iostudioJavaScript for Web AppsOverview of Throne of JS
Wait – JavaScript for Business Logic?           I know what you’re thinking.
How Tasty is this Donut?• JavaScript owns the UI – sort of• It has to query the DOM for the current UI state     • $(‗.don...
A Better Way• Send down a bunch of JSON data  on page load• Set up objects and classes with  properties and methods• Only ...
Benefits: FasterFaster DOM interaction    •   Never getting, only settingFaster server interaction    •   You can make mor...
Enter the FrameworksThese Aren‘t Novel Concepts   •   Plenty of people have invented this wheel in the past few yearsAfter...
Common Concepts — Data on the Wire•   Never send dynamic HTML down from the server•   Always send JSON and let the client ...
Common Concepts — MV*•   Separate the UI from the business logic•   Some implementations favor traditional MVC•   Some are...
Common Concepts — Data Binding• Updating a property in  your object should be  reflected everywhere in  the view …• … with...
Common Concepts — Templating• Since we‘re never receiving HTML from the server, we  need a way to quickly generate HTML fr...
Common Concepts — URL Routing• Most use HTML5 pushState with hash fallback• Some are customizable, some aren‘t• Makes sing...
Framework Face-Off: TodoMVC          DojoSpineMeteor              YUI
Backbone.js Library Jeremy Ashkenas, Boy Genius & Creator of CoffeeScript
Backbone.js Library•   Tiny – 800 lines of readable code•   Basically boilerplate code•   Around for 2 years•   Minimal bu...
Ember.js Framework• Same conventions as Rails    • ―Common problems should have      common solutions.‖• Has everything yo...
Angular.js Framework•   Developed by Google•   ―Polyfill for future version of ES‖•   Extensible, doesn‘t control whole pa...
Knockout.js Library•   DOM-based templates by default•   No default router•   No default data storage•   Extensible•   13k...
Batman.js Framework• CoffeeScript only• Ruby required• So….
Meteor.js Framework• Totally different from the others! (―The future‖)• Same syntax on server and client• Requires Node.js...
Javascript for Wep Apps
Javascript for Wep Apps
Javascript for Wep Apps
Javascript for Wep Apps
Upcoming SlideShare
Loading in …5
×

Javascript for Wep Apps

659 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
659
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Our subject matter expert PMs who:Sit with another departmentWork with leadership of that department to improve processes and streamline workflow.Develop and manage the Standard Operating Procedures (SOP) for a particular program with the department director.A set project teamRepeatable systematic projects
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Mention background about the department: - how old we are - how we came about
  • Javascript for Wep Apps

    1. 1. iostudioJavaScript for Web AppsOverview of Throne of JS
    2. 2. Wait – JavaScript for Business Logic? I know what you’re thinking.
    3. 3. How Tasty is this Donut?• JavaScript owns the UI – sort of• It has to query the DOM for the current UI state • $(‗.donut‘)• Then makes a business decision • if $donut.is(‗.chocolate‘) { ... }• Then reports it back to the server • $.ajax({ data: { id: $donut.attr(‗data-id‘) }, ... })• Then the server makes a business decision• Then the server sends new HTML• Then JavaScript updates the DOM • $donut.append(‗<p>92% Tasty</p>‘);
    4. 4. A Better Way• Send down a bunch of JSON data on page load• Set up objects and classes with properties and methods• Only use the server when you must
    5. 5. Benefits: FasterFaster DOM interaction • Never getting, only settingFaster server interaction • You can make more assumptions that data sent to the server will be successful when all your business logic lives on the client • User assumes things have gone right until proven otherwise • No visible round trips to the server!
    6. 6. Enter the FrameworksThese Aren‘t Novel Concepts • Plenty of people have invented this wheel in the past few yearsAfter You Buy In, You Get Lots of Other Awesome Features • Bootstrap projects to get them off the ground faster • Cleaner code in MV* style (no more jQuery spaghetti code) • Community tested: more stable than rolling your own • And more depending on the robustness of your framework
    7. 7. Common Concepts — Data on the Wire• Never send dynamic HTML down from the server• Always send JSON and let the client decide how to render it• The server acts as an API endpoint for retrieving and posting data
    8. 8. Common Concepts — MV*• Separate the UI from the business logic• Some implementations favor traditional MVC• Some are more lenient and integrate better with the Prototypal model• The DOM is the View; the framework provides the Model and the interaction between them “Ask the notes how many notes there are. Don’t run a count of <li>s to figure it out. If you have to start with what’s been served on page load, you’ve already lost the battle.”
    9. 9. Common Concepts — Data Binding• Updating a property in your object should be reflected everywhere in the view …• … without your help!• Also called dependency detection, dependency tracking, or reactivity
    10. 10. Common Concepts — Templating• Since we‘re never receiving HTML from the server, we need a way to quickly generate HTML from JSON• DOM templates (data-* attributes to signify logic)• String templates (ie, Mustache/Handlebars)
    11. 11. Common Concepts — URL Routing• Most use HTML5 pushState with hash fallback• Some are customizable, some aren‘t• Makes single-page applications possible
    12. 12. Framework Face-Off: TodoMVC DojoSpineMeteor YUI
    13. 13. Backbone.js Library Jeremy Ashkenas, Boy Genius & Creator of CoffeeScript
    14. 14. Backbone.js Library• Tiny – 800 lines of readable code• Basically boilerplate code• Around for 2 years• Minimal but extensible• Can use underscore‘s string templating engine or any other
    15. 15. Ember.js Framework• Same conventions as Rails • ―Common problems should have common solutions.‖• Has everything you need to build an ambitious web app• Lots of abstraction, less extensibility• Requires Handlebars.js• Biggest filesize (42kb gzipped)
    16. 16. Angular.js Framework• Developed by Google• ―Polyfill for future version of ES‖• Extensible, doesn‘t control whole page• DOM-based templates• Tooling: Chrome debugger plugin, E2E• Large (76 non gzipped)
    17. 17. Knockout.js Library• DOM-based templates by default• No default router• No default data storage• Extensible• 13kb gzipped• Javascript or CoffeeScript• Microsoft-backed (server-agnostic but designed by ASP.NET MVC guys)
    18. 18. Batman.js Framework• CoffeeScript only• Ruby required• So….
    19. 19. Meteor.js Framework• Totally different from the others! (―The future‖)• Same syntax on server and client• Requires Node.js (installs on command line)• Abstracts database interaction to the point that you assume you always have direct db access• No duplication of logic• Web Sockets for Automatic UI Updates • That is, refreshless hot fixes• Standardized Syntax, not Extensible

    ×