Ember.js Meetup Brussels 31/10/2013
-
Upload
hstry -
Category
Technology
-
view
809 -
download
0
description
Transcript of Ember.js Meetup Brussels 31/10/2013
![Page 1: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/1.jpg)
Welcome, Embeeriststo the first Ember.js meetup in Brussels
![Page 2: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/2.jpg)
Why this meetup?
![Page 3: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/3.jpg)
Local community
![Page 4: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/4.jpg)
Share knowledge andexperience
![Page 5: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/5.jpg)
Share frustrations
![Page 6: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/6.jpg)
Stay up-to-date
![Page 7: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/7.jpg)
Be inspired
![Page 8: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/8.jpg)
Have a nice evening amongpeers
![Page 11: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/11.jpg)
Tell us about yourselfWho are you?
Why do you find Ember interesting?What brings you here?
![Page 12: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/12.jpg)
What is Ember.js?MVC framework to develop ambitious web
applicationsMakes it easier to develop single-page web apps
Closes the gap between web and native apps
![Page 14: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/14.jpg)
Ember.js ArchitectureConvention over configuration
![Page 15: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/15.jpg)
Ember.js ArchitectureRouter Model
Controller
View
Template
![Page 16: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/16.jpg)
Clear Responsabilities
Template
Templates define the HTML of theapplication. They are written in theHandlebars templating language.
Router Model
Controller
View
<p class="hello-world"> Hello, {{firstName}}! {{#if isOld}} You are old! {{/if}}</p>
![Page 17: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/17.jpg)
Clear ResponsabilitiesModel
Models store the domain objects (similarto models in RoR).Router
Controller
View
Template
App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string')});
![Page 18: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/18.jpg)
Clear Responsabilities
Controller
Controllers provide an interface of themodel to the view.Router Model
View
Template
App.PersonController = Ember.ObjectController.extend({ fullName: function() { return ( this.get('firstName') + " " + this.get('lastName')); }.property('firstName', 'fullName')});
<p class="hello-world"> Hello, {{fullName}}</p>
![Page 19: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/19.jpg)
Clear Responsabilities
View
Views execute DOM-related events andconvert them into semantic actions (e.g.'click' to 'deleteUser').
Router Model
Controller
Template
App.ClickableView = Ember.View.extend({ click: function(evt) { this.get('controller') .send('deleteUser', 11); }});
![Page 20: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/20.jpg)
Clear ResponsabilitiesRouter
The Router transitions between acollection of routes, each representing anapplication state and identified by a URL.
Each Route tells the template which modelit should display.
The router interface is similar to the RoRrouter.
Model
Controller
View
Template
App.Router.map(function() { this.route("about", { path: "/about" }); this.route("favorites", { path: "/favs" }); this.resource('users', function() { this.route('new'); });});
![Page 21: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/21.jpg)
Ember-DataSeparate from Ember.js
Sits between server and modelsDeserialises JSON into Ember models
Serialises models into JSON
![Page 22: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/22.jpg)
Personal cool features
![Page 23: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/23.jpg)
Data binding!Don't bother updating the view when your model changesNo more mirroring your DOM structure in Javascript
Easy as Excel
$('.main-container .users li .name').each(function() { ... });
![Page 24: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/24.jpg)
DEMO 1
![Page 25: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/25.jpg)
DEMO 2
![Page 26: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/26.jpg)
Automatically append/removeHTML
![Page 27: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/27.jpg)
DEMO
![Page 28: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/28.jpg)
Enforced structureHard to get out of MVC
No more jQuery spaghetti code
![Page 29: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/29.jpg)
RoutingNo page refreshesYet, unique URLs
Yet, back button works
![Page 30: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/30.jpg)
... and there's so much more!
![Page 31: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/31.jpg)
Not all sunshine and rainbows
![Page 32: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/32.jpg)
Heavy~230 KiB minified
Not so good for mobileA lot of JS to execute
![Page 33: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/33.jpg)
SEOEngines do not see dynamically generated HTML
Importance depending on your caseStatic content in <noscript> tags
Service like prerender.io
![Page 34: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/34.jpg)
Steep learning curve
![Page 35: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/35.jpg)
Documentation (or lack thereof)Is improving
Digging though source is necessaryA lot of trial-and-error/StackOverflow for non-
standard things
![Page 36: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/36.jpg)
Unstable APIAnnoying for help (discard 2012)
Also getting better1.0.0 released on September 9th, 2013
![Page 37: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/37.jpg)
Resources
![Page 38: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/38.jpg)
Official Ember.js guidesTo get you started...
... and for afteremberjs.com/guides
![Page 39: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/39.jpg)
Ember.js APIPretty crucial
Contains links to source on GitHubemberjs.com/api
![Page 40: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/40.jpg)
Ember WeeklyWeekly newsletter
Everything you need to knowWatch for next Brussels meetup!
emberweekly.com
![Page 41: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/41.jpg)
EmberWatchLinks to talks, screencasts, tutorials,...
NYC Meetups are worth watchingemberwatch.com
![Page 42: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/42.jpg)
Ember DiscussHigh-level discussions: architecture, feature
proposals,...Uses Discourse: first "real" Ember.js application
discuss.emberjs.com
![Page 43: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/43.jpg)
StackOverflowAll concrete questions
Quickly outdated!
![Page 44: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/44.jpg)
Hstry is hiring!* Sorry for shameless ad
![Page 45: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/45.jpg)
Hstry is hiring!Ed-tech startup
NEST'Up Spring 2013Building and piloting our product
Ember.js with Ruby on Rails REST API
Come talk to me!
![Page 46: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/46.jpg)
What to do during meetupsGeneral talks about Ember.js or anything relatedCool little hacks that you want to show ("lightning talk" style)Showcase your project
![Page 47: Ember.js Meetup Brussels 31/10/2013](https://reader033.fdocuments.in/reader033/viewer/2022060109/55581ea7d8b42a25588b4a93/html5/thumbnails/47.jpg)
That's it for meGithub
YoranBrondsema/emberjs-meetup-brussels