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.

Ff075e16f16f327bee1f233542b8b7fc?s=128

Adam McCrea

May 10, 2012
Tweet

Transcript

  1. Building iWitness with Ember.js Adam McCrea

  2. None
  3. None
  4. None
  5. Frustration Exploration Clarity

  6. None
  7. None
  8. None
  9. Agenda • Ember.js basics • iWitness • iWitness Ember.js

  10. Ember.js

  11. Ember.js SproutCore

  12. Ember.js SproutCore SproutCore 2.0

  13. Ember.js SproutCore SproutCore 2.0 Amber.js

  14. <!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>
  15. <!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>
  16. <!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>
  17. <!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>
  18. <!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>
  19. <!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>
  20. DEMO

  21. iWitness Constraints • 100% client-side • open-source • free to

    use
  22. The Ember Way • How can properties and observers help

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

  24. iWitness Launch two weeks away

  25. iWitness Launch two weeks away follow @adamlogic for announcement

  26. iWitness Launch two weeks away follow @adamlogic for announcement USE

    IT!
  27. iWitness Launch two weeks away follow @adamlogic for announcement USE

    IT! Thanks!