layout: true class: animated, fadeIn --- class: center, middle # The ReactJS Ecosystem 2017 .logo[![ReactJS Logo](img/react.png)] --- About me: ### Tran Trong Thanh - CTO of [NauStud.io](https://naustud.io) - Front End Architect - Curator of SaigonJS FB group - 9 years with Front End dev (4 yrs ActionScript -> 5 yrs JavaScript) - Started working with **React since 0.11** (2014) - Worked 1 year in a large **Angular 2** project (2016) - Still learning **VueJS** 👶 .fa.fa-github-alt[] [/trongthanh](https://github.com/trongthanh) .fa.fa-twitter[] [@trongthanh](https://twitter.com/trongthanh) .fa.fa-facebook[] [fb.me/trongthanh](https://facebook.com/TrongThanh) .logo.white-bg[![Nau Studio](img/nau-logo.png)] .logo[![SaigonJS](img/saigon-js.svg)] --- # Agenda - The state of ReactJS 2017 - ReactJS Ecosystem: - SPA necessities: - UI kit - Router - State / events management - API management - Developer tools: chrome extension, unit test - Designer tool: React Studio - Quick Demo: React Studio - ReactJS Influences - Universal JS application: NextJS --- # The state of ReactJS ![React hype](img/react-hype.jpg) --- # The state of ReactJS - Created by Jordan Walke, a software engineer at Facebook - Deployed on FB newsfeed 2011 - Open sourced at JSConf US May 2013 - Current release: **15.4.2** / January 6, 2017 - Github stars: **61,530** - React is currently being used on the websites of **Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, and others** --- class: center, middle # ReactJS Ecosystem --- ## Single Page Applications -- ![SPA Pillars](img/spa-pillars.png) --- ## UI Toolkit -- - [React toolbox](http://react-toolbox.com) (Material Design) - [React Blueprint](http://blueprintjs.com) (Bootstrap-like) - [Elemental UI](http://elemental-ui.com) (initially for KeystoneJS, Bootstrap-like) - [Material UI](http://www.material-ui.com/) (MD, inline CSS, styled components) - [MUICSS](https://www.muicss.com) (has components for both ReactJS & Angular) - [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/) - [Grommet](https://grommet.github.io) - [OnsenUI](https://onsen.io) (full hybrid toolkit) --- .topic[UI Toolkit] ### Animation Helpers - ReactCSSTransitionGroup -- ```javascript return (
Add Item
{items}
); ``` --- .topic[UI Toolkit] ### Animation Helpers - ReactCSSTransitionGroup ```css .example-enter { opacity: 0.01; } .example-enter.example-enter-active { opacity: 1; transition: opacity 500ms ease-in; } .example-leave { opacity: 1; } .example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; } ``` --- .topic[UI Toolkit] ### Animation Helpers - [react-motion](https://github.com/chenglou/react-motion) -- ```javascript render() { return (
{({x}) => // children is a callback which should accept // the current value of `style`
}
); }, ``` --- ## Router -- - The de-facto [**react-router**](https://github.com/ReactTraining/react-router) library - Current stable v3, beta v4 -- ```javascript // Finally, we render a
with some
s. // It does all the fancy routing stuff for us. render((
), document.body); ``` --- ## State / events management -- - Before FLUX: - [Backbone](http://backbonejs.org) - Custom events -- - FLUX - refluxjs - fluxible - Redux - ... --- .topic[State / events management] ### FLUX Flux is the application architecture [...] for building client-side web applications. It complements React's composable view components by utilizing a **unidirectional data flow**. -- ![Flux diagram](img/flux-diagram.png) --- .topic[State / events management] ### Redux -- [Redux](http://redux.js.org) was created by **Dan Abramov** in 2015. Redux is inspired by Facebook’s **Flux** and influenced by functional programming language **Elm**. .logo.white-bg[![Redux logo](img/redux-logo.svg)] -- Three principle of Redux: - Single source of truth - State is read-only - Changes are made with pure functions --- ## API management -- - Backbone models - jQuery AJAX + simple Flux - Fetch / Request + **redux-thunk** - Fetch + **redux-saga** - **Relay** + GraphQL --- .topic[API management] ### Relay + GraphQL .logo[![GraphQL logo](img/graphql-logo.svg)] - [**GraphQL**](http://graphql.org) is a query language for APIs and a runtime for fulfilling those queries with your existing data. .logo[![Relay logo](img/relay-logo.svg)] - [**Relay**](https://facebook.github.io/relay/) is a JavaScript framework for building data-driven **React** applications with **GraphQL** is the query language to exchange data between client & server. --- .topic[API management] ### Relay + GraphQL .column[ GraphQL: ```json query { users { firstName, lastName, email, birthday, gender, joinDate } } ``` ] -- .column[ JSON: ```json [{ "firstName": "Mark", "lastName": "Zuckerberg", "email": "mark-AT-facebook-DOT-com", "birthday": "1984-01-13", "gender": "Male", "joinDate": "2004-04-02" }] ``` ] --- ## Developer Tools -- - React chrome extension - Unit test for React component: [JEST](https://facebook.github.io/jest/) --- ## Designer Tools -- - Introducing [React Studio](https://neonto.com/reactstudio) --- class: center, middle ## React Studio Demo --- ## ReactJS Influences -- - Unidirectional Architecture (Flux, Redux, vuex) -- ![RIP MVC](img/rip-frontend-mvc.png) .footnote[[Image & article by Alex Moldovan](https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec#.5h4lhb717)] --- ## ReactJS Influences - Unidirectional Architecture (Flux, Redux, vuex) ![RIP MVC](img/flux-comp.png) .footnote[[Image & article by Alex Moldovan](https://medium.freecodecamp.com/is-mvc-dead-for-the-frontend-35b4d1fe39ec#.5h4lhb717)] --- ## ReactJS Influences - Unidirectional Architecture (Flux, Redux, vuex) - Composition over inheritance (Component based, [higher-order components](https://t.co/DA72RwtR0c)) -- - JSX & VirtualDOM (Ember, Vue, [Preact](http://preactjs.com/)) -- - CSS in JS (styled components, jscss) -- - Universal JS application (Universal Angular 2, Ember, VueJS 2) --- class: center, middle ## Demo NextJS --- layout: false class: animated, fadeIn, center, middle # Questions & Answers --- class: animated, fadeIn, center, middle # Thanks ### The End .footnote[Made with [remarkjs](https://github.com/gnab/remark). Source at [GitHub](https://github.com/trongthanh/talk-reactjs-ecosystem).]