Isomorphic React + Flux at Yahoo
2 likes1,273 views
This document discusses Yahoo's use of isomorphic React and Flux to build web applications. It begins with background on the presenter and an overview of isomorphic web applications. The document then covers React, Flux, and building an isomorphic version by running Flux on the server. Key challenges discussed are handling server-only libraries, including CSS for dynamic modules, and transferring state between server and client. Links are provided to examples of Yahoo's implementation and approaches to CSS. The presentation concludes with time for questions.
1 of 22
Download to read offline
Ad
Recommended
Umbraco development across large and distributed teams
Umbraco development across large and distributed teamsJanusz Stabik Development teams rarely consist of just one developer. Contractors work externally and infrastructure can be split across multiple sites, developers have different skill-sets / remits / requirements and sometimes we collaborate with external parties. This can quickly turn into a “spiders web” of dependencies.
Here I address how to develop with Umbraco when working in a large / distributed team, looking at strategies that we can employ to provide for a productive development process.
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkAlive Kuo JavascriptMVC is another client side web MVC framework based on jQuery. It has totally solution to build a web application. This slide will introduce basic features of JavascriptMVC3.2
Mean Stack for Beginners
Mean Stack for BeginnersJEMLI Fathi This document provides an introduction to the MEAN stack for beginners. It discusses JavaScript standards and Node.js for the backend using Express.js. It also covers MongoDB as a NoSQL database and its advantages over relational databases. Finally, it discusses Angular as a frontend framework for building single page applications, its core concepts and advantages over other frameworks. The document aims to give beginners an overview of each technology that makes up the MEAN stack.
DOM Structure
DOM Structurebaabtra.com - No. 1 supplier of quality freshers This document provides an overview of the Document Object Model (DOM) including:
- The DOM is a programming model that represents objects in an HTML or XML document as a tree structure.
- It describes the DOM standard levels developed by the W3C for handling documents.
- JavaScript can be used to manipulate the DOM tree programmatically for things like form validation.
- Web pages need to be well-formed XHTML and include IDs to identify elements for DOM manipulation.
Server-side React with Headless CMS – Exove
Server-side React with Headless CMS – ExoveExove This document discusses using Next.js and a headless CMS to build server-side rendered React apps that improve SEO. Next.js allows building server-side rendered React apps using server-side rendering for better SEO than traditional single-page apps. A headless CMS like Contentful manages just the content without the front-end, providing an API for a separate front-end app like one built with Next.js to retrieve and display the content.
Engineering Frontends
Engineering FrontendsVladimir Milojević The intention of this presentation is to give an answer to WHY questions. I think this kind of content should be more present on the web. Example framework is Angular, but most of the presentation content is framework agnostic.
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...Hariharan Ganesan What's so popular about MEAN stack? And why should you switch to MEAN stack development for your next project? This ppt answers both the questions.
Knockout js (Dennis Haney)
Knockout js (Dennis Haney)JavaScript Meetup HCMC Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
KO provides a complementary, high-level way to link a data model to a UI.
Introduction to React
Introduction to ReactYos Riady A talk on the React.js library, covering the two key principles of react: reusable components and statelessness in your UI. Also covers some internals of the virtual DOM.
AD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentShean McManus In the beginning, the web was built largely on static HTML pages. While HTML is still the foundation for the modern web page, the explosion of JavaScript libraries, CSS frameworks, development tools, platforms and cloud offerings have made the understanding the universe of modern web development much more challenging. What is Angular? The MEAN stack? What is the difference between HTML and HTML5 or CSS and CSS3? To break it all down I will attempt to provide a clear overview of today's web including a taxonomy of common languages, tools, platforms and libraries. Learn how IBM xPages and IBM Blue Mix fit into this world and how all the terms you hear every day fit into the larger picture of modern web development.
A powerful web application server (intravision IBM Connect 2013 Update) Febru...
A powerful web application server (intravision IBM Connect 2013 Update) Febru...Per Henrik Lausten I gave this presentation at the IBM Connect 2013 Update seminar hosted by Intravision on February 25 at IBM in Copenhagen.
http://per.lausten.dk/blog/2013/02/ibm-connect-2013-update-with-intravision.html
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackShailendra Chauhan The webinar introduces the MEAN stack for developing web applications with MongoDB, Express, AngularJS, and Node.js. It discusses the benefits of the full-stack JavaScript solution and covers introductions to each component - MongoDB for data storage, Node.js as the server-side environment, Express as the web framework, and AngularJS for the front-end. The agenda also includes demonstrations of MEAN app architecture, folder structure, and a discussion of jobs trends in web development frameworks and programming languages.
Introduction to Nodejs and Isomorphic javascript
Introduction to Nodejs and Isomorphic javascriptChenKuo Chen This document discusses asynchronous programming, Node.js, and isomorphic JavaScript web frameworks. It describes how Node.js uses asynchronous and event-driven programming to handle requests without blocking. It also explains how isomorphic frameworks allow JavaScript code to run on both the client-side and server-side, allowing code reuse and initial page rendering from the server. Traditional frameworks are compared to single page applications and how isomorphic frameworks address some of the challenges with SEO and duplicate code.
Don't Make Me Wait! A Primer on Site Speed
Don't Make Me Wait! A Primer on Site SpeedJoe Fleming Presentation on site speed and its importance given to the North Phoenix/Scottsdale - Arizona WordPress Group on Thursday, August 15th, 2013.
Parallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxGuy Bary This presentation is about the intricacies of web performance, obstacles that impact rendering and loading time, and explores solutions that can help to reduce execution bottlenecks and rendering latency.
This presentation covers the basics of the web application execution model, including the modern event loop, v8 and chromium. In addition, we will discuss and highlight APIs that could be used to optimize and monitor web performance.
From nothing to a video under 2 seconds / Mikhail Sychev (YouTube)
From nothing to a video under 2 seconds / Mikhail Sychev (YouTube)Ontico What does it take to achieve sub two seconds video playback latency on the 3rd largest website in the world?
We will peek under the hood of the Watch page and explore what common problems are being solved by
YouTube's Desktop team and what interesting solutions had to be implemented to achieve this goal.
We will discuss how page loads are classified and what specific treatment is required for every type, what tools and technologies are used in the stack, how being one of the largest image serving websites affects our approach to thumbnails and how we maintain and monitor our latency goals.
Web Assembly
Web AssemblyValerio Como Web Assembly (Wasm) is a new format for running compiled code on the web. It aims to provide better performance than JavaScript by allowing code written in languages like C/C++ to run in the browser as fast native code. Wasm modules define functions, memory, and other objects and can be compiled to a small size and load quickly. It features a portable binary format and JavaScript integration, allowing compiled code to interface with web APIs and DOM. Wasm pursues goals of portability, security, and integration with web standards to enhance browser performance without plugins.
About order form improvements
About order form improvementsGengo This document summarizes improvements made to Gengo's order form pages. The pages were rebuilt using Python, decanter, and JavaScript libraries. Socket.io and Redis were used to speed up API returns asynchronously and cache data. Grunt was used to compile files and optimize for development and production.
Introduction to Gengo's New Order Form tech
Introduction to Gengo's New Order Form techGengo This document summarizes improvements made to Gengo's order form pages. The pages were rebuilt using Python, decanter, and JavaScript libraries. Socket.io and Redis were used to speed up API returns asynchronously and cache data. Grunt was used to compile files and optimize for development and production.
Tools and libraries for common problems (Early Draft)
Tools and libraries for common problems (Early Draft)rc2209 This is an early draft, actual slides: https://www.slideshare.net/rc2209/tools-and-libraries-for-common-android-problems
In this talk I cover a wide variety of tools to solve all types of well solved Android Problems. I discuss best practices, gotchas, problems and great solutions.
Seo for single page applications
Seo for single page applicationsJustinGillespie12 This document discusses SEO challenges for single page applications (SPAs) and strategies to improve their rankings. While SPAs provide good user experiences, server-side rendered websites often rank higher in search results. The document recommends a two-pronged approach: using performance optimization techniques like pre-rendering to help crawlers index SPAs, and selectively server-side rendering high-value content to increase page rank. Tools like Lighthouse and services like Netlify and Prerender.io can help with implementation.
Moving From Angular to React
Moving From Angular to ReactIlya Gurevich This document summarizes a company's transition from using Angular to React for their frontend framework. It discusses why they wanted to change frameworks, the research they did into Angular 2, VueJS and React, and why they ultimately chose React. It also addresses some immediate roadblocks they faced and improvements they noticed. While the transition was time-consuming, they believe it was worth it to use a framework that is faster, simpler and has a larger community in React.
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Learnosity Watch the video of this session: https://youtu.be/_mVwU2qjmUw?t=1s
Our code runs on your page so we have a responsibility not to hog the memory, bandwidth, and CPU cycles that you need to deliver the best experience to your users.
That’s why we aim to make our APIs the fastest part of any page or product.
In this session, we’ll look at some specific examples of how we keep things fast at all levels of our architecture by using only the resources that we need, when we need them. We’ll talk about how we detect performance issues, and some improvements we’d like to make in the future. We’ll also have some suggestions to help client developers get the best performance out of Learnosity’s products.
Html5 storage suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptxdeepmoteria This document discusses various client-side storage options in HTML5, including web storage, web SQL database, and IndexedDB. It explains that web storage allows storing data locally within the browser, provides better performance than cookies, and includes localStorage for persistent data and sessionStorage for temporary data. While sufficient for simple storage needs, complex data manipulation is better handled by structured databases like IndexedDB, which stores data as JavaScript objects for fast access. The document also covers application caching to enable offline browsing and compares browser support for different storage technologies.
Introduction to MeteorJS
Introduction to MeteorJSWeiming Chen An introduction to MeteorJS with a simple chatroom app code demo.
Demo code is available at: https://github.com/MingStar/meteorjs-chatroom-demo
The slides were made, for an audience who are familiar with Ruby on Rails, yet with little experience with Node or Meteor.
Wade.Go Introduction Speech - SFD HCMC 2014
Wade.Go Introduction Speech - SFD HCMC 2014Nguyễn Thành Hải Introduction speech about my up and coming Wade.Go client-side centric web framework for Go.
The project is at http://github.com/phaikawl/wade
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Kazuhiro Ogura The document discusses porting a mobile app to the desktop using Chrome Apps. Chrome Apps allow creating multi-platform apps using HTML, CSS, and JavaScript that launch independently of the browser. While Chrome Apps provide functionality like local storage and system APIs, there are some limitations, such as no access to OS-level secure storage and interaction with the <webview> is restricted. Overall, Chrome Apps were found to be a promising option for creating multi-platform desktop apps but still have some stability and documentation issues to address.
Harnessing the cloud_for_saa_s_hosted_platfor
Harnessing the cloud_for_saa_s_hosted_platforLuke Summerfield This document discusses cloud hosting and software as a service (SaaS) models and provides examples of how they can be applied to Joomla sites. It defines cloud hosting as hosting on scalable infrastructure managed by a third party where resources can be added linearly as needed. SaaS is described as accessing software via an online service rather than installing it locally. The document outlines advantages and disadvantages of each approach and provides vendor options and examples of how cloud hosting and SaaS could solve challenges for sites with heavy traffic or simple hosting needs.
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersLewiz The complexity of frontend web development has increased measurably. Gone are the days of jQuery. New frameworks like React and Vue and tools like Webpack are the new deal.
In this talk, we will try to make sense of the current state of front-end development and how it changes how we write backend code. More specifically, we will see how Symfony and Laravel help us in that regard.
Decoupled (Headless) Drupal
Decoupled (Headless) DrupalDaniel Stout The document discusses headless Drupal, which separates the front-end interface built with JavaScript frameworks from the Drupal backend which acts as an API. It outlines the benefits of this approach, popular JavaScript frameworks that can be used including Backbone.js and AngularJS, and how to implement headless Drupal using services and REST modules in Drupal 7 and the built-in capabilities in Drupal 8. Examples are provided and it's noted that Drupal is well positioned for the growing need for APIs and data-driven approaches to websites.
Ad
More Related Content
What's hot (6)
Introduction to React
Introduction to ReactYos Riady A talk on the React.js library, covering the two key principles of react: reusable components and statelessness in your UI. Also covers some internals of the virtual DOM.
AD109 Navigating the Jungle of Modern Web Development
AD109 Navigating the Jungle of Modern Web DevelopmentShean McManus In the beginning, the web was built largely on static HTML pages. While HTML is still the foundation for the modern web page, the explosion of JavaScript libraries, CSS frameworks, development tools, platforms and cloud offerings have made the understanding the universe of modern web development much more challenging. What is Angular? The MEAN stack? What is the difference between HTML and HTML5 or CSS and CSS3? To break it all down I will attempt to provide a clear overview of today's web including a taxonomy of common languages, tools, platforms and libraries. Learn how IBM xPages and IBM Blue Mix fit into this world and how all the terms you hear every day fit into the larger picture of modern web development.
A powerful web application server (intravision IBM Connect 2013 Update) Febru...
A powerful web application server (intravision IBM Connect 2013 Update) Febru...Per Henrik Lausten I gave this presentation at the IBM Connect 2013 Update seminar hosted by Intravision on February 25 at IBM in Copenhagen.
http://per.lausten.dk/blog/2013/02/ibm-connect-2013-update-with-intravision.html
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackShailendra Chauhan The webinar introduces the MEAN stack for developing web applications with MongoDB, Express, AngularJS, and Node.js. It discusses the benefits of the full-stack JavaScript solution and covers introductions to each component - MongoDB for data storage, Node.js as the server-side environment, Express as the web framework, and AngularJS for the front-end. The agenda also includes demonstrations of MEAN app architecture, folder structure, and a discussion of jobs trends in web development frameworks and programming languages.
Introduction to Nodejs and Isomorphic javascript
Introduction to Nodejs and Isomorphic javascriptChenKuo Chen This document discusses asynchronous programming, Node.js, and isomorphic JavaScript web frameworks. It describes how Node.js uses asynchronous and event-driven programming to handle requests without blocking. It also explains how isomorphic frameworks allow JavaScript code to run on both the client-side and server-side, allowing code reuse and initial page rendering from the server. Traditional frameworks are compared to single page applications and how isomorphic frameworks address some of the challenges with SEO and duplicate code.
Don't Make Me Wait! A Primer on Site Speed
Don't Make Me Wait! A Primer on Site SpeedJoe Fleming Presentation on site speed and its importance given to the North Phoenix/Scottsdale - Arizona WordPress Group on Thursday, August 15th, 2013.
Similar to Isomorphic React + Flux at Yahoo (20)
Parallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxGuy Bary This presentation is about the intricacies of web performance, obstacles that impact rendering and loading time, and explores solutions that can help to reduce execution bottlenecks and rendering latency.
This presentation covers the basics of the web application execution model, including the modern event loop, v8 and chromium. In addition, we will discuss and highlight APIs that could be used to optimize and monitor web performance.
From nothing to a video under 2 seconds / Mikhail Sychev (YouTube)
From nothing to a video under 2 seconds / Mikhail Sychev (YouTube)Ontico What does it take to achieve sub two seconds video playback latency on the 3rd largest website in the world?
We will peek under the hood of the Watch page and explore what common problems are being solved by
YouTube's Desktop team and what interesting solutions had to be implemented to achieve this goal.
We will discuss how page loads are classified and what specific treatment is required for every type, what tools and technologies are used in the stack, how being one of the largest image serving websites affects our approach to thumbnails and how we maintain and monitor our latency goals.
Web Assembly
Web AssemblyValerio Como Web Assembly (Wasm) is a new format for running compiled code on the web. It aims to provide better performance than JavaScript by allowing code written in languages like C/C++ to run in the browser as fast native code. Wasm modules define functions, memory, and other objects and can be compiled to a small size and load quickly. It features a portable binary format and JavaScript integration, allowing compiled code to interface with web APIs and DOM. Wasm pursues goals of portability, security, and integration with web standards to enhance browser performance without plugins.
About order form improvements
About order form improvementsGengo This document summarizes improvements made to Gengo's order form pages. The pages were rebuilt using Python, decanter, and JavaScript libraries. Socket.io and Redis were used to speed up API returns asynchronously and cache data. Grunt was used to compile files and optimize for development and production.
Introduction to Gengo's New Order Form tech
Introduction to Gengo's New Order Form techGengo This document summarizes improvements made to Gengo's order form pages. The pages were rebuilt using Python, decanter, and JavaScript libraries. Socket.io and Redis were used to speed up API returns asynchronously and cache data. Grunt was used to compile files and optimize for development and production.
Tools and libraries for common problems (Early Draft)
Tools and libraries for common problems (Early Draft)rc2209 This is an early draft, actual slides: https://www.slideshare.net/rc2209/tools-and-libraries-for-common-android-problems
In this talk I cover a wide variety of tools to solve all types of well solved Android Problems. I discuss best practices, gotchas, problems and great solutions.
Seo for single page applications
Seo for single page applicationsJustinGillespie12 This document discusses SEO challenges for single page applications (SPAs) and strategies to improve their rankings. While SPAs provide good user experiences, server-side rendered websites often rank higher in search results. The document recommends a two-pronged approach: using performance optimization techniques like pre-rendering to help crawlers index SPAs, and selectively server-side rendering high-value content to increase page rank. Tools like Lighthouse and services like Netlify and Prerender.io can help with implementation.
Moving From Angular to React
Moving From Angular to ReactIlya Gurevich This document summarizes a company's transition from using Angular to React for their frontend framework. It discusses why they wanted to change frameworks, the research they did into Angular 2, VueJS and React, and why they ultimately chose React. It also addresses some immediate roadblocks they faced and improvements they noticed. While the transition was time-consuming, they believe it was worth it to use a framework that is faster, simpler and has a larger community in React.
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Learnosity Watch the video of this session: https://youtu.be/_mVwU2qjmUw?t=1s
Our code runs on your page so we have a responsibility not to hog the memory, bandwidth, and CPU cycles that you need to deliver the best experience to your users.
That’s why we aim to make our APIs the fastest part of any page or product.
In this session, we’ll look at some specific examples of how we keep things fast at all levels of our architecture by using only the resources that we need, when we need them. We’ll talk about how we detect performance issues, and some improvements we’d like to make in the future. We’ll also have some suggestions to help client developers get the best performance out of Learnosity’s products.
Html5 storage suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptxdeepmoteria This document discusses various client-side storage options in HTML5, including web storage, web SQL database, and IndexedDB. It explains that web storage allows storing data locally within the browser, provides better performance than cookies, and includes localStorage for persistent data and sessionStorage for temporary data. While sufficient for simple storage needs, complex data manipulation is better handled by structured databases like IndexedDB, which stores data as JavaScript objects for fast access. The document also covers application caching to enable offline browsing and compares browser support for different storage technologies.
Introduction to MeteorJS
Introduction to MeteorJSWeiming Chen An introduction to MeteorJS with a simple chatroom app code demo.
Demo code is available at: https://github.com/MingStar/meteorjs-chatroom-demo
The slides were made, for an audience who are familiar with Ruby on Rails, yet with little experience with Node or Meteor.
Wade.Go Introduction Speech - SFD HCMC 2014
Wade.Go Introduction Speech - SFD HCMC 2014Nguyễn Thành Hải Introduction speech about my up and coming Wade.Go client-side centric web framework for Go.
The project is at http://github.com/phaikawl/wade
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Kazuhiro Ogura The document discusses porting a mobile app to the desktop using Chrome Apps. Chrome Apps allow creating multi-platform apps using HTML, CSS, and JavaScript that launch independently of the browser. While Chrome Apps provide functionality like local storage and system APIs, there are some limitations, such as no access to OS-level secure storage and interaction with the <webview> is restricted. Overall, Chrome Apps were found to be a promising option for creating multi-platform desktop apps but still have some stability and documentation issues to address.
Harnessing the cloud_for_saa_s_hosted_platfor
Harnessing the cloud_for_saa_s_hosted_platforLuke Summerfield This document discusses cloud hosting and software as a service (SaaS) models and provides examples of how they can be applied to Joomla sites. It defines cloud hosting as hosting on scalable infrastructure managed by a third party where resources can be added linearly as needed. SaaS is described as accessing software via an online service rather than installing it locally. The document outlines advantages and disadvantages of each approach and provides vendor options and examples of how cloud hosting and SaaS could solve challenges for sites with heavy traffic or simple hosting needs.
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersLewiz The complexity of frontend web development has increased measurably. Gone are the days of jQuery. New frameworks like React and Vue and tools like Webpack are the new deal.
In this talk, we will try to make sense of the current state of front-end development and how it changes how we write backend code. More specifically, we will see how Symfony and Laravel help us in that regard.
Decoupled (Headless) Drupal
Decoupled (Headless) DrupalDaniel Stout The document discusses headless Drupal, which separates the front-end interface built with JavaScript frameworks from the Drupal backend which acts as an API. It outlines the benefits of this approach, popular JavaScript frameworks that can be used including Backbone.js and AngularJS, and how to implement headless Drupal using services and REST modules in Drupal 7 and the built-in capabilities in Drupal 8. Examples are provided and it's noted that Drupal is well positioned for the growing need for APIs and data-driven approaches to websites.
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez Web Components are a W3C standard for building reusable custom elements with encapsulated styles and markup. They include features like templates for reusable markup, shadow DOM for encapsulation, custom elements for defining new types of elements, and imports for loading elements from external files. Frameworks like Polymer and X-Tags provide polyfills to bring these features to browsers that don't natively support them yet. Web Components allow developers to build encapsulated, reusable custom UI elements and enable new patterns for component-based development.
Undo, Redo and Collaboration in Web Applications
Undo, Redo and Collaboration in Web ApplicationsMiro Cupak This document discusses using application-level undo and redo features to enable collaboration in web applications. It presents Asciiflow, a web-based diagram drawing software, and modifications made to support collaboration between multiple users. Key changes included tracking user actions, extending server communication to share states, adding auto-save capabilities, and resolving conflicts during undo/redo by maintaining a global log of user actions on the server. The implementation was evaluated for performance overhead compared to the original single-user version.
Drupal BigPipe: What have I learned
Drupal BigPipe: What have I learnedRadim Klaška This document provides an overview of BigPipe in Drupal 8 and how it works to improve perceived page load performance. BigPipe sends the initial content quickly using small requests to fill in remaining parts, so the page appears interactive sooner. It works by caching page parts separately using cache metadata and lazy rendering. Placeholders are generated for non-cached parts and replaced later. This allows caching the base page for all users while dynamically filling in varying content like a shopping cart in the placeholders. Modules just need to provide proper cache metadata rather than complex configuration.
East bay full stack developers meetup August 2019
East bay full stack developers meetup August 2019Connor Leech This document discusses the technical choices and rationale for building high-traffic, dynamic websites at Ask. It describes using a configuration-driven approach with reusable components and libraries to rapidly launch new domains and sites within a 1 sprint turnaround. The key aspects are leveraging modular view components, the Archie Node.js library, and JSON configuration files to declaratively configure domains, pages, and site features in a scalable way.
Ad
Isomorphic React + Flux at Yahoo
- 1. Isomorphic React+Flux at Yahoo Mr. Friday
- 2. About me ● MMDays (2007~) ● Yahoo TW (2010) ● Yahoo US (2011~) ○ Frontpage ○ News ○ MyYahoo ○ ...
- 3. Agenda ● Isomorphic ● React + Flux ● Isomorphic Flux ● Challenges ● Q&A
- 5. Client side Single Page Application ● Benefits: Fast, richer user experiences ● Drawbacks: ○ SEO ○ Potential double work ○ Performance ○ Legacy browsers
- 6. Examples ● No page reload ● Same URL, different experiences after reload ● Any way to reuse the code ?
- 10. Yahoo had tried it ... ● “First open source isomorphic framework to get any press” - Airbnb ● Lesson learned: ○ Server side YUI was too heavy ○ Sync Server/Client state and routing was hard ○ YUI format is problematic in Node
- 11. React JS ● Finite state machine ● Re-render everytime ● Virtual DOM to save perf.
- 12. Flux ● Uni-directional data flow
- 13. Isomorphic + React + Flux ? ● Plain javascript to run efficiently on both server and client ● State transferring between server/client is easy ● Challenge: Flux is client side only.
- 14. Server side Flux
- 15. Implementation details https://speakerdeck.com/mridgway/isomorphic- flux starting slide 26 https://github.com/yahoo/flux-examples
- 16. Challenges - Server-only Libs ● Every code needs to run on server/client. Need a way to handle server side only libraries. ○ Create a service that only runs on server side ○ Move them to APIs ○ Apache traffic server
- 17. CSS Challenges ● Dynamic modules brings additonal CSS challenges ● Webpack is not good at including CSS ● In tradition, we use CSS combo tool. Now we either need to reimplement it in react environment, or find something else.
- 18. CSS: How facebook did it https://speakerdeck.com/vjeux/react-css-in-js
- 19. CSS: How Yahoo did it http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
- 20. Holy Grail
- 22. Thank you !