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

802

Published on

The first Ember.js meetup in Brussels.

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
802
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×