SlideShare a Scribd company logo
1 of 47
Download to read offline
Wl m, b rt
eoeme is
c E es
to the first Ember.js meetup in Brussels
Wyh me p
htseu
i t?
Local community
Share knowledge and
experience
Share frustrations
Stay up-to-date
Be inspired
Have a nice evening among
peers
A umsf
b ty l
o e
@YoranBrondsema
yoran@hstry.org
24 years old
Developer/CTO at H RO
S YR
T .G
3 months Ember.js user
Tlsb to sf
e ua uy r l
l o ue
Who are you?
Why do you find Ember interesting?
What brings you here?
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
DO
E
M
~1060 lines of code
Eb .A heu
mej r ic r
rs ctt e
Convention over configuration
Eb .A heu
mej r ic r
rs ctt e
Router

Model

Controller

View

Template
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
/>
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'
};
)
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
/>
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;
}
};
)
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';
};
)
};
)
Eb - t
meD a
ra
Separate from Ember.js
Sits between server and models
Deserialises JSON into Ember models
Serialises models into JSON
P s ac l a r
e o lo ft e
r n o eu s
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
DEMO 1
DEMO 2
Automatically append/remove
HTML
DEMO
Enforced structure
Hard to get out of MVC
No more jQuery spaghetti code
Routing
No page refreshes
Yet, unique URLs
Yet, back button works
.nt rsou mr
. dh esmc o !
. e'
a
h e
N a s sna rn w
o l u hen ab s
t l n i d io
Heavy
~230 KiB minified
Not so good for mobile
A lot of JS to execute
SEO
Engines do not see dynamically generated HTML
Importance depending on your case
Static content in <noscript> tags
Service like prerender.io
Steep learning curve
Documentation (or lack thereof)
Is improving
Digging though source is necessary
A lot of trial-and-error/StackOverflow for nonstandard things
Unstable API
Annoying for help (discard 2012)
Also getting better
1.0.0 released on September 9th, 2013
Ro c
eu e
s rs
Official Ember.js guides
To get you started...
... and for after
emberjs.com/guides
Ember.js API
Pretty crucial
Contains links to source on GitHub
emberjs.com/api
Ember Weekly
Weekly newsletter
Everything you need to know
Watch for next Brussels meetup!
emberweekly.com
EmberWatch
Links to talks, screencasts, tutorials,...
NYC Meetups are worth watching
emberwatch.com
Ember Discuss
High-level discussions: architecture, feature
proposals,...
Uses Discourse: first "real" Ember.js application
discuss.emberjs.com
StackOverflow
All concrete questions
Quickly outdated!
H ri i g
s y hi!
t sr
n
* Sorry for shameless ad
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!
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
T tiom
h 't re
as f
Github
YoranBrondsema/emberjs-meetup-brussels

More Related Content

What's hot

CoffeeScript in 5mins
CoffeeScript in 5minsCoffeeScript in 5mins
CoffeeScript in 5mins
Masakuni Kato
 

What's hot (10)

CRaSH the shell for the Java Virtual Machine
CRaSH the shell for the Java Virtual MachineCRaSH the shell for the Java Virtual Machine
CRaSH the shell for the Java Virtual Machine
 
C to perl binding
C to perl bindingC to perl binding
C to perl binding
 
Reasons To Love Ruby
Reasons To Love RubyReasons To Love Ruby
Reasons To Love Ruby
 
Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...
Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...
Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...
 
CoffeeScript in 5mins
CoffeeScript in 5minsCoffeeScript in 5mins
CoffeeScript in 5mins
 
Node js
Node jsNode js
Node js
 
Introduction to Vim, the text editor
Introduction to Vim, the text editorIntroduction to Vim, the text editor
Introduction to Vim, the text editor
 
CocoaHeads Bratislava #1 - Swift
CocoaHeads Bratislava #1 - SwiftCocoaHeads Bratislava #1 - Swift
CocoaHeads Bratislava #1 - Swift
 
Zeno rocha - HTML5 APIs para Mobile
Zeno rocha - HTML5 APIs para MobileZeno rocha - HTML5 APIs para Mobile
Zeno rocha - HTML5 APIs para Mobile
 
Let's talk ChatOps - Hubot with less CoffeeScript
Let's talk ChatOps - Hubot with less CoffeeScriptLet's talk ChatOps - Hubot with less CoffeeScript
Let's talk ChatOps - Hubot with less CoffeeScript
 

Viewers also liked

IE superior speaking
IE superior speakingIE superior speaking
IE superior speaking
kuhi_1993
 

Viewers also liked (7)

Çocuklara Kitap Okumayı Sevdirmenin 5 yolu
Çocuklara Kitap Okumayı Sevdirmenin 5 yoluÇocuklara Kitap Okumayı Sevdirmenin 5 yolu
Çocuklara Kitap Okumayı Sevdirmenin 5 yolu
 
Roland barthes
Roland barthesRoland barthes
Roland barthes
 
IE superior speaking
IE superior speakingIE superior speaking
IE superior speaking
 
Historython Presentation - May 3rd 2014
Historython Presentation - May 3rd 2014Historython Presentation - May 3rd 2014
Historython Presentation - May 3rd 2014
 
Volatility impact of political and economic events
Volatility impact of political and economic events Volatility impact of political and economic events
Volatility impact of political and economic events
 
Leveraging Email to Grow Your Sales
Leveraging Email to Grow Your SalesLeveraging Email to Grow Your Sales
Leveraging Email to Grow Your Sales
 
Hstry KIKK Festival
Hstry KIKK FestivalHstry KIKK Festival
Hstry KIKK Festival
 

Similar to Ember.js Meetup Brussels 31/10/2013

Getty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI toolGetty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI tool
Robert J. Stein
 
Presentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCIPresentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCI
Robert J. Stein
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
 
The Factors For The Website
The Factors For The WebsiteThe Factors For The Website
The Factors For The Website
Julie May
 
Exploring SharePoint with F#
Exploring SharePoint with F#Exploring SharePoint with F#
Exploring SharePoint with F#
Talbott Crowell
 

Similar to Ember.js Meetup Brussels 31/10/2013 (20)

Pourquoi Ruby on Rails ça déchire ?
Pourquoi Ruby on Rails ça déchire ?Pourquoi Ruby on Rails ça déchire ?
Pourquoi Ruby on Rails ça déchire ?
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Evolve Your Code
Evolve Your CodeEvolve Your Code
Evolve Your Code
 
Backbone the Good Parts
Backbone the Good PartsBackbone the Good Parts
Backbone the Good Parts
 
.NET and C# introduction
.NET and C# introduction.NET and C# introduction
.NET and C# introduction
 
Best node js course
Best node js courseBest node js course
Best node js course
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
 
The Functional Web
The Functional WebThe Functional Web
The Functional Web
 
Getty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI toolGetty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI tool
 
Presentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCIPresentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCI
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
 
2.1 Web Dev Syllabus.pdf.pdf
2.1 Web Dev Syllabus.pdf.pdf2.1 Web Dev Syllabus.pdf.pdf
2.1 Web Dev Syllabus.pdf.pdf
 
The Factors For The Website
The Factors For The WebsiteThe Factors For The Website
The Factors For The Website
 
Intro to-html-backbone
Intro to-html-backboneIntro to-html-backbone
Intro to-html-backbone
 
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017   ember.js - escape the javascript fatigueNode.js meetup 17.05.2017   ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
 
Web dev syllabus
Web dev syllabusWeb dev syllabus
Web dev syllabus
 
Exploring SharePoint with F#
Exploring SharePoint with F#Exploring SharePoint with F#
Exploring SharePoint with F#
 
Getting into ember.js
Getting into ember.jsGetting into ember.js
Getting into ember.js
 
REST+JS - Codebits 2011
REST+JS - Codebits 2011REST+JS - Codebits 2011
REST+JS - Codebits 2011
 
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Recently uploaded (20)

Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 

Ember.js Meetup Brussels 31/10/2013

  • 1. Wl m, b rt eoeme is c E es to the first Ember.js meetup in Brussels
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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