SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
/	
  
/	
  

WebApp	
  /	
  SPA	
  
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
WebApp / SPA @ AllFacebook Developer Conference
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  App,	
  Spawn	
  Processes	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  App,	
  Spawn	
  Processes	
  

3.  Rou3ng	
  Controller	
  
Database	
  Requests	
  
Rendering	
  of	
  Response	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  App,	
  Spawn	
  Processes	
  

3.  Rou3ng	
  Controller	
  

Database	
  Requests	
  
Rendering	
  of	
  	
  User	
  List	
  Page	
  

4.  Response	
  

User	
  receives	
  Result	
  à	
  HTML	
  Document	
  with	
  List	
  of	
  all	
  
Users	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  App,	
  Spawn	
  Processes	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  App,	
  Spawn	
  Processes	
  

3.  Rou3ng	
  Controller	
  
Database	
  Requests	
  
Rendering	
  of	
  User	
  Detail	
  Page	
  
Server	
  Side	
  Rendered	
  Applica3ons	
  
1.  Request	
  
/user/1	
  

2.  Webserver	
  
Looking	
  for	
  correct	
  App,	
  Spawn	
  Processes	
  

3.  Rou3ng	
  Controller	
  
Database	
  Requests	
  
Rendering	
  of	
  User	
  Detail	
  Page	
  

4.  Response	
  
User	
  receives	
  Result	
  
But…	
  why?	
  
• 
• 
• 
• 

Current	
  user	
  
User	
  rights	
  
Friends	
  
…	
  
What	
  if…	
  
•  The	
  Server	
  only	
  needs	
  to	
  send	
  data	
  that	
  
changed?	
  
•  Business	
  Logic	
  and	
  Valida3ons	
  live	
  in	
  the	
  
Browser?	
  
•  User	
  can	
  flawless	
  navigate	
  through	
  “pages”	
  
without	
  sending	
  Server	
  requests?	
  
Benefits	
  
•  Shaky	
  Internet?	
  No	
  Problem!	
  
•  Server	
  load	
  is	
  reduced	
  (which	
  means	
  costs	
  are	
  
reduced…)	
  
•  Easy	
  to	
  scale	
  (CDN	
  for	
  Sta3c	
  Files)	
  
•  Lot	
  of	
  content	
  is	
  cached	
  but	
  s3ll	
  dynamic	
  
•  Eat	
  your	
  own	
  dogfood!	
  
Why	
  now?	
  
• 
• 
• 
• 
• 

JavaScript	
  Performance	
  /	
  Acceptance	
  
Web	
  Sockets	
  
WebGL	
  
FileReader	
  API	
  
Web	
  Workers	
  
Frameworks:	
  AngularJS	
  
•  Backed	
  by	
  Google	
  
WebApp / SPA @ AllFacebook Developer Conference
Frameworks:	
  EmberJS	
  
•  Backed	
  by	
  Yehuda	
  Katz	
  
WebApp / SPA @ AllFacebook Developer Conference
Frameworks:	
  React	
  
•  Backed	
  by	
  Facebook	
  +	
  Instagram	
  
WebApp / SPA @ AllFacebook Developer Conference
Rethink…	
  Databinding	
  
•  Data	
  is	
  mainly	
  processed	
  in	
  your	
  browser	
  
Rethink…	
  XHR	
  
•  Websockets	
  send	
  Data	
  “via	
  push”	
  
•  No	
  Longpolling,	
  No	
  Interval	
  Polling	
  
•  à	
  Good	
  for	
  your	
  Server	
  
Rethink…	
  Storing	
  of	
  Data	
  
•  Vars	
  are	
  “always	
  available”	
  
•  Web	
  Storage	
  
–  Your	
  new	
  BFF	
  
	
  

•  Backend	
  (hey…	
  it’s	
  his	
  job…)	
  
–  Lean	
  API	
  
–  Op3mized	
  Requests	
  
Rethink…	
  Authen3ca3on	
  
•  Crazy	
  People:	
  I	
  logout,	
  You	
  login…	
  
–  The	
  good:	
  Clear	
  the	
  environment	
  
–  The	
  bad:	
  Don’t	
  care…	
  
–  The	
  ugly:	
  Reload	
  on	
  logout	
  

•  Error	
  Handling	
  
–  403	
  à	
  Alarm?	
  
Rethink…	
  URLs	
  
•  You	
  s3ll	
  need	
  URLs	
  
–  Deeplinks:	
  Sharing,	
  Likes	
  
–  User	
  need	
  them	
  (for	
  some	
  reason…)	
  

•  Rou3ng	
  via	
  JavaScript	
  
Rethink…	
  UX	
  
•  UI	
  is	
  very	
  fast…	
  
•  Reac3on	
  could	
  be	
  unexpected	
  
–  Add	
  Loading	
  Behavior	
  
–  Don’t	
  forget	
  Error	
  Handling	
  
•  Messages	
  
•  Offline	
  Mode?	
  
We	
  are	
  already	
  building	
  SPA!	
  
•  jQuery	
  
•  “No	
  Flash”	
  
•  AJAX	
  
Challenges:	
  SEO	
  
•  Google	
  can	
  read	
  /	
  execute	
  JavaScript…	
  
Challenges:	
  SEO	
  
“If	
  fancy	
  features	
  such	
  as	
  JavaScript,	
  
cookies,	
  session	
  IDs,	
  frames,	
  DHTML,	
  or	
  
Flash	
  keep	
  you	
  from	
  seeing	
  all	
  of	
  your	
  site	
  
in	
  a	
  text	
  browser,	
  then	
  search	
  engine	
  
spiders	
  may	
  have	
  trouble	
  crawling	
  your	
  
site”	
  
Challenges:	
  SEO	
  
•  AJAX…	
  (#!Hashbang)	
  
Challenges:	
  SEO	
  
•  phantomJS	
  
•  Prerendered	
  HTML	
  
•  Via	
  #!	
  à	
  escaped_fragment	
  
Challenges:	
  SEO	
  
•  phantomJS	
  
•  Prerendered	
  HTML	
  
•  Via	
  #!	
  à	
  escaped_fragment	
  

	
  

	
  Facbook	
  Open	
  Graph	
  
Challenges:	
  Backend	
  
•  Frontend	
  JavaScript	
  /	
  Backend	
  JavaScript	
  
–  Reuse	
  Modules	
  /	
  Business	
  Logic	
  

•  Fast	
  Architecture	
  à	
  Lightweight	
  
–  NGINX	
  
–  nodeJS	
  

•  API	
  Queries	
  via	
  JavaScript	
  /	
  Frontend	
  
–  Don’t	
  forget	
  to	
  use	
  Field	
  Expansion	
  
–  And	
  Batch	
  Requests	
  
Conclusion	
  
• 
• 
• 
• 

SPA	
  supercharge	
  your	
  Canvas	
  /	
  Tab	
  Apps	
  
Reduce	
  server	
  costs	
  
Can	
  reduce	
  development	
  costs	
  
Are	
  JavaScript	
  (which	
  is	
  awesome…)	
  
//	
   CONTACT	
  
FLORIAN.BERGMANN@FLOBBYMEDIA.DE
@FLOBBY

Más contenido relacionado

Was ist angesagt?

[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...
[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...
[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...Ho Chi Minh City Software Testing Club
 
Take your drupal sites offline
Take your drupal sites offlineTake your drupal sites offline
Take your drupal sites offlineChris Ward
 
BDD / cucumber /Capybara
BDD / cucumber /CapybaraBDD / cucumber /Capybara
BDD / cucumber /CapybaraShraddhaSF
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NETPeter Gfader
 
Testing Any Site With Cucumber and Selenium
Testing Any Site With Cucumber and SeleniumTesting Any Site With Cucumber and Selenium
Testing Any Site With Cucumber and SeleniumChris Johnson
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applicationshchen1
 
WordPress Development Tools and Best Practices
WordPress Development Tools and Best PracticesWordPress Development Tools and Best Practices
WordPress Development Tools and Best PracticesDanilo Ercoli
 
Improve WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of codeImprove WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of codeDanilo Ercoli
 
Let's Take Drupal Offline!
Let's Take Drupal Offline!Let's Take Drupal Offline!
Let's Take Drupal Offline!Dick Olsson
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance Dave Olsen
 
Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Pixel Crayons
 
GeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGGDBologna
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web developmentChristian Heilmann
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWebDave Bouwman
 
Restful Web Services
Restful Web ServicesRestful Web Services
Restful Web ServicesAngelin R
 
HATEOAS 101 - Opinionated Introduction to a REST API Style
HATEOAS 101 - Opinionated Introduction to a REST API StyleHATEOAS 101 - Opinionated Introduction to a REST API Style
HATEOAS 101 - Opinionated Introduction to a REST API StyleApigee | Google Cloud
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
ASP.NET Tutorial - Presentation 1
ASP.NET Tutorial - Presentation 1ASP.NET Tutorial - Presentation 1
ASP.NET Tutorial - Presentation 1Kumar S
 

Was ist angesagt? (20)

[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...
[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...
[Thong Nguyen & Trong Bui] Behavior Driven Development (BDD) and Automation T...
 
Take your drupal sites offline
Take your drupal sites offlineTake your drupal sites offline
Take your drupal sites offline
 
BDD / cucumber /Capybara
BDD / cucumber /CapybaraBDD / cucumber /Capybara
BDD / cucumber /Capybara
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
 
Testing Any Site With Cucumber and Selenium
Testing Any Site With Cucumber and SeleniumTesting Any Site With Cucumber and Selenium
Testing Any Site With Cucumber and Selenium
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
WordPress Development Tools and Best Practices
WordPress Development Tools and Best PracticesWordPress Development Tools and Best Practices
WordPress Development Tools and Best Practices
 
Improve WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of codeImprove WordPress performance with caching and deferred execution of code
Improve WordPress performance with caching and deferred execution of code
 
Let's Take Drupal Offline!
Let's Take Drupal Offline!Let's Take Drupal Offline!
Let's Take Drupal Offline!
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
 
Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?
 
GeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPressGeneralMobile Hybrid Development with WordPress
GeneralMobile Hybrid Development with WordPress
 
The road to professional web development
The road to professional web developmentThe road to professional web development
The road to professional web development
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
 
Making the web faster
Making the web fasterMaking the web faster
Making the web faster
 
Restful Web Services
Restful Web ServicesRestful Web Services
Restful Web Services
 
HATEOAS 101 - Opinionated Introduction to a REST API Style
HATEOAS 101 - Opinionated Introduction to a REST API StyleHATEOAS 101 - Opinionated Introduction to a REST API Style
HATEOAS 101 - Opinionated Introduction to a REST API Style
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
ASP.NET Tutorial - Presentation 1
ASP.NET Tutorial - Presentation 1ASP.NET Tutorial - Presentation 1
ASP.NET Tutorial - Presentation 1
 

Andere mochten auch

Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
Writing SPA in 2017
Writing SPA in 2017Writing SPA in 2017
Writing SPA in 2017Arek Flinik
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajaxs_pradeep
 
Webinar on Angular JS titled 'Develop Responsive Single Page Application'
Webinar on Angular JS titled 'Develop Responsive Single Page Application'Webinar on Angular JS titled 'Develop Responsive Single Page Application'
Webinar on Angular JS titled 'Develop Responsive Single Page Application'Edureka!
 
Single page application
Single page applicationSingle page application
Single page applicationJeremy Lee
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentationthinkphp
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programminghchen1
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentationJohn Staveley
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajaxNir Elbaz
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slidesSmithss25
 
SPA 2009 - Acceptance Testing AJAX Web Applications through the GUI
SPA 2009 - Acceptance Testing AJAX Web Applications through the GUISPA 2009 - Acceptance Testing AJAX Web Applications through the GUI
SPA 2009 - Acceptance Testing AJAX Web Applications through the GUIandrew.macleod
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajaxRaja V
 

Andere mochten auch (16)

Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Writing SPA in 2017
Writing SPA in 2017Writing SPA in 2017
Writing SPA in 2017
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
 
Webinar on Angular JS titled 'Develop Responsive Single Page Application'
Webinar on Angular JS titled 'Develop Responsive Single Page Application'Webinar on Angular JS titled 'Develop Responsive Single Page Application'
Webinar on Angular JS titled 'Develop Responsive Single Page Application'
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Single page application
Single page applicationSingle page application
Single page application
 
Ajax Introduction Presentation
Ajax   Introduction   PresentationAjax   Introduction   Presentation
Ajax Introduction Presentation
 
Single page application
Single page applicationSingle page application
Single page application
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programming
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentation
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax ppt - 32 slides
Ajax ppt - 32 slidesAjax ppt - 32 slides
Ajax ppt - 32 slides
 
SPA 2009 - Acceptance Testing AJAX Web Applications through the GUI
SPA 2009 - Acceptance Testing AJAX Web Applications through the GUISPA 2009 - Acceptance Testing AJAX Web Applications through the GUI
SPA 2009 - Acceptance Testing AJAX Web Applications through the GUI
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Ajax.ppt
Ajax.pptAjax.ppt
Ajax.ppt
 

Ähnlich wie WebApp / SPA @ AllFacebook Developer Conference

Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuningJohn McCaffrey
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to JqueryGurpreet singh
 
Offline capable web applications with Google Gears and Dojo Offline
Offline capable web applications with Google Gears and Dojo OfflineOffline capable web applications with Google Gears and Dojo Offline
Offline capable web applications with Google Gears and Dojo Offlineguestcb5c22
 
How to Contribute to Apache Usergrid
How to Contribute to Apache UsergridHow to Contribute to Apache Usergrid
How to Contribute to Apache UsergridDavid M. Johnson
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5Chris Love
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Jeremy Likness
 
Avtar's ppt
Avtar's pptAvtar's ppt
Avtar's pptmak57
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applicationsEugene Lazutkin
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal
 
Delivering Mobile Apps That Perform
Delivering Mobile Apps That PerformDelivering Mobile Apps That Perform
Delivering Mobile Apps That PerformRuben Goncalves
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
 
API Prefetching - HTML5DevConf - Oct. 21, 2014
API Prefetching - HTML5DevConf - Oct. 21, 2014API Prefetching - HTML5DevConf - Oct. 21, 2014
API Prefetching - HTML5DevConf - Oct. 21, 2014JonAbrams
 
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax ApplicationsTSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applicationsguestc75cdc
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applicationsSergeyChernyshev
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in schoolMichael Galpin
 
Changhao jiang facebook
Changhao jiang facebookChanghao jiang facebook
Changhao jiang facebookzipeng zhang
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsChris Love
 

Ähnlich wie WebApp / SPA @ AllFacebook Developer Conference (20)

Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Offline capable web applications with Google Gears and Dojo Offline
Offline capable web applications with Google Gears and Dojo OfflineOffline capable web applications with Google Gears and Dojo Offline
Offline capable web applications with Google Gears and Dojo Offline
 
How to Contribute to Apache Usergrid
How to Contribute to Apache UsergridHow to Contribute to Apache Usergrid
How to Contribute to Apache Usergrid
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
Remix
RemixRemix
Remix
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Avtar's ppt
Avtar's pptAvtar's ppt
Avtar's ppt
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Delivering Mobile Apps That Perform
Delivering Mobile Apps That PerformDelivering Mobile Apps That Perform
Delivering Mobile Apps That Perform
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
API Prefetching - HTML5DevConf - Oct. 21, 2014
API Prefetching - HTML5DevConf - Oct. 21, 2014API Prefetching - HTML5DevConf - Oct. 21, 2014
API Prefetching - HTML5DevConf - Oct. 21, 2014
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax ApplicationsTSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applications
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in school
 
Changhao jiang facebook
Changhao jiang facebookChanghao jiang facebook
Changhao jiang facebook
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 

Mehr von AllFacebook.de

„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...AllFacebook.de
 
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...AllFacebook.de
 
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...AllFacebook.de
 
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMCTikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMCAllFacebook.de
 
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...AllFacebook.de
 
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMCTake your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMCAllFacebook.de
 
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMCWie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMCAllFacebook.de
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...AllFacebook.de
 
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMCExperimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMCAllFacebook.de
 
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMCGeheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMCAllFacebook.de
 
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...AllFacebook.de
 
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMCOnlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMCAllFacebook.de
 
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMCAllFacebook.de
 
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...AllFacebook.de
 
Social Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMCSocial Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMCAllFacebook.de
 
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...AllFacebook.de
 
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...AllFacebook.de
 
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...AllFacebook.de
 

Mehr von AllFacebook.de (20)

„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
 
Grow Up. Finally.
Grow Up. Finally.Grow Up. Finally.
Grow Up. Finally.
 
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
 
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
 
Instagram 2020 #AFBMC
Instagram 2020 #AFBMCInstagram 2020 #AFBMC
Instagram 2020 #AFBMC
 
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMCTikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
 
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
 
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMCTake your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
 
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMCWie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
 
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMCExperimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
 
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMCGeheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
 
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
 
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMCOnlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
 
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
 
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
 
Social Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMCSocial Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMC
 
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
 
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
 
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
 

WebApp / SPA @ AllFacebook Developer Conference

  • 1. /   /   WebApp  /  SPA  
  • 6. Server  Side  Rendered  Applica3ons   1.  Request   /user  
  • 7. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes  
  • 8. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of  Response  
  • 9. Server  Side  Rendered  Applica3ons   1.  Request   /user   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of    User  List  Page   4.  Response   User  receives  Result  à  HTML  Document  with  List  of  all   Users  
  • 10. Server  Side  Rendered  Applica3ons   1.  Request   /user/1  
  • 11. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes  
  • 12. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of  User  Detail  Page  
  • 13. Server  Side  Rendered  Applica3ons   1.  Request   /user/1   2.  Webserver   Looking  for  correct  App,  Spawn  Processes   3.  Rou3ng  Controller   Database  Requests   Rendering  of  User  Detail  Page   4.  Response   User  receives  Result  
  • 14. But…  why?   •  •  •  •  Current  user   User  rights   Friends   …  
  • 15. What  if…   •  The  Server  only  needs  to  send  data  that   changed?   •  Business  Logic  and  Valida3ons  live  in  the   Browser?   •  User  can  flawless  navigate  through  “pages”   without  sending  Server  requests?  
  • 16. Benefits   •  Shaky  Internet?  No  Problem!   •  Server  load  is  reduced  (which  means  costs  are   reduced…)   •  Easy  to  scale  (CDN  for  Sta3c  Files)   •  Lot  of  content  is  cached  but  s3ll  dynamic   •  Eat  your  own  dogfood!  
  • 17. Why  now?   •  •  •  •  •  JavaScript  Performance  /  Acceptance   Web  Sockets   WebGL   FileReader  API   Web  Workers  
  • 18. Frameworks:  AngularJS   •  Backed  by  Google  
  • 20. Frameworks:  EmberJS   •  Backed  by  Yehuda  Katz  
  • 22. Frameworks:  React   •  Backed  by  Facebook  +  Instagram  
  • 24. Rethink…  Databinding   •  Data  is  mainly  processed  in  your  browser  
  • 25. Rethink…  XHR   •  Websockets  send  Data  “via  push”   •  No  Longpolling,  No  Interval  Polling   •  à  Good  for  your  Server  
  • 26. Rethink…  Storing  of  Data   •  Vars  are  “always  available”   •  Web  Storage   –  Your  new  BFF     •  Backend  (hey…  it’s  his  job…)   –  Lean  API   –  Op3mized  Requests  
  • 27. Rethink…  Authen3ca3on   •  Crazy  People:  I  logout,  You  login…   –  The  good:  Clear  the  environment   –  The  bad:  Don’t  care…   –  The  ugly:  Reload  on  logout   •  Error  Handling   –  403  à  Alarm?  
  • 28. Rethink…  URLs   •  You  s3ll  need  URLs   –  Deeplinks:  Sharing,  Likes   –  User  need  them  (for  some  reason…)   •  Rou3ng  via  JavaScript  
  • 29. Rethink…  UX   •  UI  is  very  fast…   •  Reac3on  could  be  unexpected   –  Add  Loading  Behavior   –  Don’t  forget  Error  Handling   •  Messages   •  Offline  Mode?  
  • 30. We  are  already  building  SPA!   •  jQuery   •  “No  Flash”   •  AJAX  
  • 31. Challenges:  SEO   •  Google  can  read  /  execute  JavaScript…  
  • 32. Challenges:  SEO   “If  fancy  features  such  as  JavaScript,   cookies,  session  IDs,  frames,  DHTML,  or   Flash  keep  you  from  seeing  all  of  your  site   in  a  text  browser,  then  search  engine   spiders  may  have  trouble  crawling  your   site”  
  • 33. Challenges:  SEO   •  AJAX…  (#!Hashbang)  
  • 34. Challenges:  SEO   •  phantomJS   •  Prerendered  HTML   •  Via  #!  à  escaped_fragment  
  • 35. Challenges:  SEO   •  phantomJS   •  Prerendered  HTML   •  Via  #!  à  escaped_fragment      Facbook  Open  Graph  
  • 36. Challenges:  Backend   •  Frontend  JavaScript  /  Backend  JavaScript   –  Reuse  Modules  /  Business  Logic   •  Fast  Architecture  à  Lightweight   –  NGINX   –  nodeJS   •  API  Queries  via  JavaScript  /  Frontend   –  Don’t  forget  to  use  Field  Expansion   –  And  Batch  Requests  
  • 37. Conclusion   •  •  •  •  SPA  supercharge  your  Canvas  /  Tab  Apps   Reduce  server  costs   Can  reduce  development  costs   Are  JavaScript  (which  is  awesome…)  
  • 38. //   CONTACT   FLORIAN.BERGMANN@FLOBBYMEDIA.DE @FLOBBY