FrintJS: Building Modular Apps with React and RxJS

For documentation, visit https://frint.js.org

Transcript

1. FrintJS https://frint.js.org July 26th, 2017 @ ViennaJS By @fahad19 from @TravixEng
2. TRAVIX
3. Travix • Global online travel company • Multiple brands worldwide • Operating in 40+ countries • 500+ employees • Growing rapidly • Engineering based in Amsterdam and London • Firm believer in Open Source https://travix.com
4. WHAT is FRINT?
5. What is Frint? • An Open Source project • A Modular JavaScript framework • Consisting of multiple packages in a monorepo • Built primarily for the needs of Travix • Generic enough to be used anywhere (browser, server, CLI, outside of Travix) • Focused on providing minimum set of building blocks • Stable since v1.0 release, and already in production Site: https://frint.js.org GitHub: https://github.com/Travix-International/frint
6. Packages in the monorepo • frint: The core package, for creating Apps • frint-react: React bindings and for rendering • frint-react-server: Server side rendering for Apps • frint-store: Reactice store for state management with actions and reducers • frint-model: Object-like data structures • frint-test-utils: Common reusable code for unit tests • frint-compat: Backwards compatibility support • frint-cli: CLI tool for FrintJS apps, with a pluggable system Coming soon: • frint-router: Services for streaming HTML5 history API, matching routes, etc • frint-router-react: React components for making SPAs • frint-data: Reactice Models and Collections, with Validation support
7. NEED for FRINT
8. Modularization
9. Why do we need Frint? • Framework can align the development across all teams • Everyone building Apps the same way • Gives us control over what we allow and NOT allow to external developers • Ultimately gives us a foundation to build upon • Allows us to predictably keep backwards compatibility every quarter • Open Source & well maintained documentation for all • Code splitting
11. Why not just use React or AngularJS directly? • Frint complements React (or any other functional rendering library) • The framework itself is very decoupled, and core is not directly tied to React • React is treated just as a rendering library by us • Frint takes care of the overall structure of your application • AngularJS is a full featured framework of its own • We needed to build on top of existing frontend (which is based on React) progressively • Starting from scratch in frontend was not an option
12. FRINT CONCEPTS
13. APPS
14. Frint Apps • At least one (Root) App needed for Frint to work • There can be other Apps (Child) registering themselves to Root • Everything goes into your App as providers
15. $ npm install --save frint
16. Frint App: example
17. COMPONENTS
18. $ npm install --save react
19. Components • Just plain React components
20. Setting Component as a Provider
21. RENDERING
22. $ npm install --save react-dom frint-react
23. Rendering an App
24. OBSERVED COMPONENTS
25. $ npm install --save rxjs
26. Streaming props to Components • Think props as a stream • Props stream emits new value, Component reacts to it and updates
27. Updating our base Component
28. Make it an observed Component
29. Component is reactive
30. Streaming props with a helper
31. REGIONS
32. Regions • Areas that we define in our Components, where other Apps can render themselves • Done with the `<Region>` Component coming from `frint-react` package
34. Defining a Region
35. ROOT and CHILD APPS
36. Root vs Child • They are both created the same way (with `createApp` function) • Root is rendered to DOM directly • Child is always registered to Root • Regions take care of rendering Child • There is always only one single Root App • No limit on number of Child apps
37. Registering Child Apps
38. CASCADED PROVIDERS
39. Cascaded Providers • Providers defined in Root apps, made available (cascaded) to Child apps • It is opt-in, so you have to set `cascade` to true when defining the provider
40. Root and Child scenario
41. Cascade it from Root
42. CASCADED and SCOPED PROVIDERS
43. Two reserved provider names • app: The current Frint app that you are in • rootApp: The root app in the tree
44. Reserved providers in action
45. What if? • You cascade a provider, that needs to be scoped by the Child App that is consuming it? • Meaning, the value of the provider being cascaded, need to be computed again, and this time with the Child app as the value of `app` dependency
46. Example scenario
47. Example scenario with scoping
48. TRY IT OUT!
49. $ mkdir frint-test $ cd frint-test $ npm install -g frint-cli $ frint init --example kitchensink $ npm install $ npm start
50. EXAMPLE APP
51. CODE SPLITTING
52. ADVANCED USAGE
53. STATE MANAGEMENT
54. frint-store • Like Redux, but with RxJS • State can be streamed • Actions: Payloads of plain objects • Reducers: Functions taking in payloads and current state, returning new state • Combine multiple reducers into one single root reducer • Apps have their own Stores • Docs: https://frint.js.org/docs/packages/frint-store/
55. $ npm install -g frint-store
56. Store set as a Provider in App
57. SHARING STORE between APPS
58. Accessing AppB fom AppA
59. Streaming another App’s state
60. Reading and dispatching to Other’s store • https://github.com/Travix-International/frint/blob/master/examples/kitchensink/ app-counter/components/Root.js#L100
61. REGION DATA
62. Region data • https://frint.js.org/docs/packages/frint-react/#region-and-data
63. REPEATING REGIONS
64. MULTI INSTANCE APPS
65. Multi-instance Apps • https://frint.js.org/docs/packages/frint-react/#multi-instance-apps
66. SERVER SIDE RENDERING
67. Server side rendering • https://frint.js.org/docs/packages/frint-react-server/
68. WHAT’S NEXT?
69. What’s next? • frint-router and frint-router-react: will be released in a few days Under consideration: • frint-data: for Models and Collections based data structures, with Schema and Validation support • frint-intl: for localization needs • frint-store: improved further with Epics
70. CONTRIBUTING
71. Contributing to Frint is easy • It’s an Open Source project • Everything is done out in the open You can: • Submit well explained bug reports • Help out others in Issues • Improve documentation • Send Pull Requests for bug fixes • Ask questions • Propose new features and directions • Spread the word
72. Your name should be here, if not already • https://github.com/Travix-International/frint/graphs/contributors
73. Useful Links • Docs: https://frint.js.org/ • Repository: https://github.com/Travix-International/frint • Issues: https://github.com/Travix-International/frint/issues • Npm: https://www.npmjs.com/package/frint • Twitter: https://twitter.com/frintjs • Medium: https://medium.com/tag/frintjs • REPL: https://frint.js.org/repl Other third-party libraries: • React: https://facebook.github.io/react/ • RxJS: http://reactivex.io/rxjs/
74. QUESTIONS