Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building iWitness with Ember.js

Building iWitness with Ember.js

Ember.js is one of the latest fish to enter the sea of options for client-side JavaScript frameworks. Like the others, it aims to provide structure and maintainability to your JavaScript-heavy apps and to help you build complex functionality quickly. Unlike many of the others, it comes with a substantial learning curve and an unimpressive amount of guidance to help you along your way. In this talk I’ll walk you through the basics of Ember, then dive into the the guts of a real application to see Ember code in the wild.

Adam McCrea

May 10, 2012
Tweet

More Decks by Adam McCrea

Other Decks in Technology

Transcript

  1. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>
  2. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>
  3. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>
  4. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>
  5. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>
  6. <!DOCTYPE html> <html> <head> <script type='text/javascript' src="jquery.js"></script> <script type='text/javascript' src="ember.js"></script>

    <script type="text/javascript"> window.App = Ember.Application.create(); App.greeter = Ember.Object.create({ greeting: 'Hello StirTrek!' }); </script> </head> <body> <script type='text/x-handlebars'> <h1>{{App.greeter.greeting}}</h1> </script> </body> </html>
  7. The Ember Way • How can properties and observers help

    solve your problem? • Declarative templates • You gotta keep ‘em separated (concerns)