Going Production with ReactJS

How to deliver ReactJS on production, at Bekraf Developer Day 2017 with Dicoding

Transcript

1. G o i n g P r o d u c t i o n w i t h ReactJS BEKRAF Developer Day 2017 03 Sept, Shangri-La Hotel Surabaya
2. @firdausious Mochammad Firdaus FRONT END ENGINEER
3. 1. Understanding Universal Apps 2. Preview about ReactJS 3. Production with ReactJS Goal
4. Universal Apps
5. 1. Run on server / client side. Hail NodeJS… 2. Team Separation Concern 3. Better Code Maintainability 4. Friendly with Microservices 5. It’s API Centric Application Benefit
6. 1. First load page, server return pre-rendered html string 2. Client-side js app bootstraps on top of server rendered html 3. From that point, it’s a client side app How it works
7. How it works
8. Nnggg… ~~ Still.. How it works ??
9. Go to…
10. 1. Usually javascript framework render on DOM load (which can be really slow) 2. Bad for user experience 3. SEO benefit Why ?
11. 1. Understanding Universal Apps 2. Preview about ReactJS 3. Production with ReactJS Goal
12. ReactJS Preview
13. 1. It’s small library & Fast 2. Single source of truth 3. Makes writing Javascript easier with JSX 4. Awesome for SEO 5. Bonus: Mobile Apps using React Native 6. Shared codebase (ex: validation, utils, i18n, etc) Why ?
18. 1. It’s all about Components 2. JSX 3. Props and State 4. Component Lifecycle 5. Component Types & Roles Keys to Learn ?
19. 1. Understanding Universal Apps 2. Preview about ReactJS 3. Production with ReactJS Goal
20. ReactJS on Production
21. 1. Uber 2. Airbnb 3. Twitter 4. Tesla 5. Slack Who’s using on Production ? More on : 
 https://github.com/facebook/react/wiki/sites-using-react 6. Pinjam.co.id 7. Traveloka 8. Salestock 9. Hijup 10. Kumparan
22. Actually… We can’t go to production with ReactJS alone… So… we need his Gang !
24. Stacks
25. For example, at , have existing API in API-Centric Application Architecture…
26. From Legacy..
27. To Latest..
28. Legacy Stacks
29. Latest Stacks
30. FE Stack Composition Primary Secondary
31. 1. Understanding Universal Apps 2. Preview about ReactJS 3. Production with ReactJS Goal
32. 1. Team separation concern 2. Cost Efficiency 3. Scalability Attention !! Use ReactJS if :
33. 1. Small budget… Whuahahhaaha.. 2. Simple Apps 3. Not developing crossplatform apps 4. Doesn’t care about scalability Attention !! Don’t use ReactJS if :
34. https://www.facebook.com/notes/arrowfunxtion-jurus-frontend- modern/berhenti-belajar-react-karena-lisensi-haruskah/ 297300930678180/
35. 1. Choose based on your needs 2. Cost Efficiency 3. Beware about learning time Conclusion
36. “Don’t worry if it doesn’t work right. If everything did, you’d be out of a job” — Mosher’s Law of Software Engineering --
37. “Ada pertanyaan ?” Catat dulu ya …
38. For your attention.. THANK YOU !!
39. • https://facebook.github.io/react/ • https://medium.com/capital-one-developers/why-everyone-is-talking- about-isomorphic-universal-javascript-and-why-it-matters-38c07c87905 • https://medium.freecodecamp.org/the-5-things-you-need-to-know-to- understand-react-a1dbd5d114a3 • https://www.facebook.com/notes/arrowfunxtion-jurus-frontend-modern/ Glossary