Your SlideShare is downloading. ×
Ember.js Meetup Brussels 31/10/2013
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ember.js Meetup Brussels 31/10/2013


Published on

The first Ember.js meetup in Brussels.

The first Ember.js meetup in Brussels.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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
  • 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'tig) isNm: Sat(srn','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
  • 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
  • 39. Ember.js API Pretty crucial Contains links to source on GitHub
  • 40. Ember Weekly Weekly newsletter Everything you need to know Watch for next Brussels meetup!
  • 41. EmberWatch Links to talks, screencasts, tutorials,... NYC Meetups are worth watching
  • 42. Ember Discuss High-level discussions: architecture, feature proposals,... Uses Discourse: first "real" Ember.js application
  • 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