Ember.js Meetup - Koblenz and Neuwied

Slides from my talk at the Ember.js meetup in Koblenz at the rz-Druckhaus.

Transcript

1. September 11, 2014 Ember.js Meetup Koblenz und Neuwied
2. { name: “Kasper Tidemann”, profession: “Software developer”, company: “Tidemann&Co”, codes: [“JavaScript”, “Go”], likesTo: “Be nice and drink beer.”, places: [“Copenhagen”, “San Francisco”], alsoDoes: “Blogging”, website: “kaspertidemann.com” } string
3. Meeho! is a CRM system and my first company.
4. My favorite editor is Atom. Now you know everything about me.
5. A bit about where we came from and where we’re headed. Status quo
6. Back then…
7. Now: Unreal 4 in the browser thanks to asm.js, a subset of JavaScript.
8. Seriously, that’s crazy! OMG LOOOOOOOL
9. Let’s talk Ember.js! App.inject( );
10. First things first. A framework for creating ambitious web applications.
11. … there’s more to it, but let’s stick to the basic. Ember.js has routes, templates and controllers. Core concepts App.Router.map(function() { this.route(‘koblenz’); this.route(‘neuwied’); }); <script type=“text/x-handlebars” id=“koblenz”> <p>Welcome to Koblenz!</p> <p>Today is {{date}}.</p> </script> App.KoblenzController = Em.Controller.extend({ date: Em.computed(function() { return (new Date()).getTime(); }) });
12. A brief overview of what comes from where. App.Router.map(function() { this.route(‘koblenz’); this.route(‘neuwied’); }); <script type=“text/x-handlebars” id=“koblenz”> <p>Welcome to Koblenz!</p> <p>Today is {{date}}.</p> </script> App.KoblenzController = Em.Controller.extend({ date: Em.computed(function() { return (new Date()).getTime(); }) });
13. Essentially, anyway. The router takes care of turning the URL into meaningful state. It invokes controllers, views, and has templates appear in the browser. Router
14. Like partials in Ruby on Rails and so on. Templates contain the HTML to show in the browser. Ember.js uses Handlebars for templating, a string-based solution soon to be replaced by HTMLBars. Templates
15. Glueing everything together! Controllers are typically instantiated by the router. Each route has a corresponding controller for working with data, variables, bindings and so on. Controllers
16. Demonstration
17. We’ve only just touched upon the surface of what Ember.js is. There is way more to Ember.js than just that: models, mixins, helpers, bindings, components and so on.
18. Sharing is caring. <3 https://github.com/KasperTidemann/emberjs-meetup-koblenz-neuwied Example files are available on GitHub:
19. Enough talk! Who actually uses this magnificent piece of software? Who uses Ember.js?
21. Because of the sensible conventions, the rapid development experience, the helpful bindings… Why should you use Ember.js? (And because you really don’t want to setInterval() for checking hash changes nor fiddle with push states yourself. Believe me, I did that once. All you want is to build an awesome app.)
22. http://www.kaspertidemann.com/ Thank you!