Ember.js Meetup Brussels 31/10/2013

1,085 views

Published on

The first Ember.js meetup in Brussels.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,085
On SlideShare
0
From Embeds
0
Number of Embeds
585
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ember.js Meetup Brussels 31/10/2013

  1. 1. Wl m, b rt eoeme is c E es to the first Ember.js meetup in Brussels
  2. 2. Wyh me p htseu i t?
  3. 3. Local community
  4. 4. Share knowledge and experience
  5. 5. Share frustrations
  6. 6. Stay up-to-date
  7. 7. Be inspired
  8. 8. Have a nice evening among peers
  9. 9. A umsf b ty l o e @YoranBrondsema yoran@hstry.org
  10. 10. 24 years old Developer/CTO at H RO S YR T .G 3 months Ember.js user
  11. 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. 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. 13. DO E M ~1060 lines of code
  14. 14. Eb .A heu mej r ic r rs ctt e Convention over configuration
  15. 15. Eb .A heu mej r ic r rs ctt e Router Model Controller View Template
  16. 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. 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. 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. 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. 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. 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. 22. P s ac l a r e o lo ft e r n o eu s
  23. 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. 24. DEMO 1
  25. 25. DEMO 2
  26. 26. Automatically append/remove HTML
  27. 27. DEMO
  28. 28. Enforced structure Hard to get out of MVC No more jQuery spaghetti code
  29. 29. Routing No page refreshes Yet, unique URLs Yet, back button works
  30. 30. .nt rsou mr . dh esmc o ! . e' a h e
  31. 31. N a s sna rn w o l u hen ab s t l n i d io
  32. 32. Heavy ~230 KiB minified Not so good for mobile A lot of JS to execute
  33. 33. SEO Engines do not see dynamically generated HTML Importance depending on your case Static content in <noscript> tags Service like prerender.io
  34. 34. Steep learning curve
  35. 35. Documentation (or lack thereof) Is improving Digging though source is necessary A lot of trial-and-error/StackOverflow for nonstandard things
  36. 36. Unstable API Annoying for help (discard 2012) Also getting better 1.0.0 released on September 9th, 2013
  37. 37. Ro c eu e s rs
  38. 38. Official Ember.js guides To get you started... ... and for after emberjs.com/guides
  39. 39. Ember.js API Pretty crucial Contains links to source on GitHub emberjs.com/api
  40. 40. Ember Weekly Weekly newsletter Everything you need to know Watch for next Brussels meetup! emberweekly.com
  41. 41. EmberWatch Links to talks, screencasts, tutorials,... NYC Meetups are worth watching emberwatch.com
  42. 42. Ember Discuss High-level discussions: architecture, feature proposals,... Uses Discourse: first "real" Ember.js application discuss.emberjs.com
  43. 43. StackOverflow All concrete questions Quickly outdated!
  44. 44. H ri i g s y hi! t sr n * Sorry for shameless ad
  45. 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. 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. 47. T tiom h 't re as f Github YoranBrondsema/emberjs-meetup-brussels

×