The first Ember.js meetup in Brussels.

1. Wl m, b rt
eoeme is
c E es
to the first Ember.js meetup in Brussels

2. Wyh me p
htseu
i t?

3. Local community

4. Share knowledge and
experience

5. Share frustrations

6. Stay up-to-date

7. Be inspired

8. Have a nice evening among
peers

9. A umsf
b ty l
o e
@YoranBrondsema
yoran@hstry.org

10. 24 years old
Developer/CTO at H RO
S YR
T .G
3 months Ember.js user

11. Tlsb to sf
e ua uy r l
l o ue
Who are you?
Why do you find Ember interesting?
What brings you here?

12. Wai mej
h s b .?
t E rs
MVC framework to develop ambitious web
applications
Makes it easier to develop single-page web apps
Closes the gap between web and native apps

13. DO
E
M
~1060 lines of code

14. Eb .A heu
mej r ic r
rs ctt e
Convention over configuration

15. Eb .A heu
mej r ic r
rs ctt e
Router
Model
Controller
View
Template

16. CaR p s i i
lre o al e
e s n bi s
t
Router
Model
Controller
View
Template
Templates define the HTML of the
application. They are written in the
Handlebars templating language.
< cas"el-ol"
p ls=hlowrd>
Hlo {frtae}
el, {isNm}!
{#fiOd}
{i sl}
Yuaeod
o r l!
{/f}
{i}
<p
/>

17. CaR p s i i
lre o al e
e s n bi s
t
Router
Model
Controller
View
Template
Models store the domain objects (similar
to models in RoR).
ApPro =D.oe.xed{
p.esn
SMdletn(
frtae D.tr'tig)
isNm: Sat(srn',
lsNm:D.tr'tig)
atae Sat(srn'
};
)

18. CaR p s i i
lre o al e
e s n bi s
t
Router
Model
Controller
View
Template
Controllers provide an interface of the
model to the view.
ApProCnrle =
p.esnotolr
EbrOjcCnrle.xed{
me.betotolretn(
flNm:fnto( {
ulae ucin)
rtr (
eun
ti.e(frtae)
hsgt'isNm'
+""
+ti.e(lsNm')
hsgt'atae);
}poet(frtae,'ulae)
.rpry'isNm' flNm'
};
)
< cas"el-ol"
p ls=hlowrd>
Hlo {flNm}
el, {ulae}
<p
/>

19. CaR p s i i
lre o al e
e s n bi s
t
Router
Model
Controller
View
Template
Views execute DOM-related events and
convert them into semantic actions (e.g.
'click' to 'deleteUser').
ApCikbeiw=EbrVe.xed{
p.lcalVe
me.iwetn(
cik fnto(v){
lc: ucinet
ti.e(cnrle'
hsgt'otolr)
.ed'eeesr,1)
sn(dltUe' 1;
}
};
)

20. CaR p s i i
lre o al e
e s n bi s
t
Router
Model
Controller
View
Template
The Router transitions between a
collection of routes, each representing an
application state and identified by a URL.
Each Route tells the template which model
it should display.
The router interface is similar to the RoR
router.
ApRue.a(ucin){
p.otrmpfnto(
ti.ot(aot,{pt:"aot };
hsrue"bu"
ah /bu" )
ti.ot(fvrts,{pt:"fv"};
hsrue"aoie"
ah /as )
ti.eore'sr' fnto( {
hsrsuc(ues, ucin)
ti.ot(nw)
hsrue'e';
};
)
};
)

21. Eb - t
meD a
ra
Separate from Ember.js
Sits between server and models
Deserialises JSON into Ember models
Serialises models into JSON

22. P s ac l a r
e o lo ft e
r n o eu s

23. Data binding!
Don't bother updating the view when your model changes
No more mirroring your DOM structure in Javascript
$'mi-otie .sr l .ae)ec(ucin){..};
(.ancnanr ues i nm'.ahfnto(
.
)
Easy as Excel

24. DEMO 1

25. DEMO 2

26. Automatically append/remove
HTML

27. DEMO

28. Enforced structure
Hard to get out of MVC
No more jQuery spaghetti code

29. Routing
No page refreshes
Yet, unique URLs
Yet, back button works

30. .nt rsou mr
. dh esmc o !
. e'
a
h e

31. N a s sna rn w
o l u hen ab s
t l n i d io

32. Heavy
~230 KiB minified
Not so good for mobile
A lot of JS to execute

33. SEO
Engines do not see dynamically generated HTML
Importance depending on your case
Static content in <noscript> tags
Service like prerender.io

34. Steep learning curve

35. Documentation (or lack thereof)
Is improving
Digging though source is necessary
A lot of trial-and-error/StackOverflow for nonstandard things

36. Unstable API
Annoying for help (discard 2012)
Also getting better
1.0.0 released on September 9th, 2013

37. Ro c
eu e
s rs

38. Official Ember.js guides
To get you started...
... and for after
emberjs.com/guides

39. Ember.js API
Pretty crucial
Contains links to source on GitHub
emberjs.com/api

40. Ember Weekly
Weekly newsletter
Everything you need to know
Watch for next Brussels meetup!
emberweekly.com

41. EmberWatch
Links to talks, screencasts, tutorials,...
NYC Meetups are worth watching
emberwatch.com

42. Ember Discuss
High-level discussions: architecture, feature
proposals,...
Uses Discourse: first "real" Ember.js application
discuss.emberjs.com

43. StackOverflow
All concrete questions
Quickly outdated!

44. H ri i g
s y hi!
t sr
n
* Sorry for shameless ad

45. H ri i g
s y hi!
t sr
n
Ed-tech startup
NEST'Up Spring 2013
Building and piloting our product
Ember.js with Ruby on Rails REST API
Come talk to me!

46. Watdd i me p
h ooun eu
t
rg t s
General talks about Ember.js or anything related
Cool little hacks that you want to show ("lightning talk" style)
Showcase your project

47. T tiom
h 't re
as f
Github
YoranBrondsema/emberjs-meetup-brussels