Open data for good
- 1. Open data for good Lessons, experiences and pains of a hobby project using React
- 3. Agenda ● Getting started with React: picking the right boilerplate ● The goal: the original idea ● The monster: what it became ● Libraries and tools: what and how to choose it ● Everything is ready ● Everything is ready: performance time ● Lessons ● What’s next?
- 4. Getting started with React ● Project idea started initially in early 2017 ● create-react-app vs next.js vs boilerplate ● Redux had to be there ● Some experience with setting up webpack, babel, etc… manually
- 5. https://youtu.be/eb60pnjABGg?t=16 Setting up webpack, babel, etc… manually
- 6. The goal ● Simple dashboard as a way to learn React and d3 together ● Few charts and and a map, all interactive ● Use Redux to coordinate the dashboard
- 7. The monster: what it became ● Multi language visual article (charts too) ● 3 maps (~10000 SVG elements) ● 18 charts ● Autocomplete with all Italian towns ● Redux everywhere ● Lazy loading e pre-rendering ● Obsessive performance profiling
- 8. Libraries and tools ● CSS Framework: Bulma - CSS only, no JS. Easy to use it with React ● React + D3: vx - a lot of cool examples. I thought it was a good choice until... Heavily based on HOC... ...with almost no documentation… ...and you need some d3 prior experience to fully understand the examples.
- 9. Libraries and tools ● CSS Framework: Bulma - CSS only, no JS. Easy to use it with React ● React + D3: vx - a lot of cool examples. I thought it was a good choice until... ● Maps: react-simple-maps - few examples but lean. Very elegant code in the demo.
- 10. Libraries and tools ● CSS Framework: Bulma - CSS only, no JS. Easy to use it with React ● React + D3: vx - a lot of cool examples. I thought it was a good choice until... ● Maps: react-simple-maps - few examples but lean. Very elegant code in the demo. ● Hosting: now.sh - A single command to deploy. Free. ● I18n: react-i18next - I knew it when introduced it at the end. ● Prerendering: puppeteer - a bit over engineered but easy to use.
- 11. First “ready” version ● Sort of spaghetti code ● Redux everywhere ● Everything in the bundle ○ JSON ○ shapefiles ● Load everything at bootstrap ● No preview for social network ● No responsive charts ● Only in Italian ~ May 2019
- 12. First “ready” version: performance time ● Make the article usable in mobile ● Shrink the bundle size ● Metrics to track: ○ First Contentful Paint ○ Time to interactive
- 13. First “ready” version: performance time ● Make the article usable in mobile ○ Reducing DOM size: prerendering maps? Think about interaction impacts. ○ Minimize main-thread work: prerendering maps? ○ Reduce Javascript execution time: prerendering maps! ● Shrinking the bundle size: ● Metrics to track: ○ First Contentful Paint ○ Time to interactive
- 15. Prerender
- 16. First “ready” version: performance time ● Make the article usable in mobile ○ Reducing DOM size: prerendering maps? Think about interaction impacts. ○ Minimize main-thread work: prerendering maps? ○ Reduce Javascript execution time: prerendering maps! ● Shrinking the bundle size: ○ Avoid enormous network payload: ■ GeoJSON => TopoJSON ~ -14 MB ■ lazy loading maps shapes ● Metrics to track: ○ First Contentful Paint ○ Time to interactive
- 17. Before (prerendering) After (+ lazy loading)
- 18. First “ready” version: performance time ● What about desktop version? Prerendering is for mobile only. I want desktop to leverage all the interactivity, but it loads everything on bootstrap...
- 19. First “ready” version: performance time ● What about desktop version? IntersectionObserver to the rescue! https://github.com/researchgate/react-intersection-observer Credit: Mozilla Hacks
- 20. Before After (+ IntersectionObserver)
- 21. Lessons ● The React ecosystem is huge and it’s easy to get lost in it ● create-react-app it’s the best prototype tool ○ Recently updated from CRA 1.x to CRA 3.x with a single code line changed! ● Before choosing a library, open the examples code, copy and paste in your codebase and see if it works! ○ vx had cool examples but hard to adapt to my case without a deep knowledge of d3 ● End your prototype/project (feature-complete) and then revisit (performance, styling, etc…) ● CSS framework only: Bulma ● Performance profiling iterative: measure, change and measure again
- 22. What’s next? ● Swap create-react-app with Gatsby ○ SSR = better performance (especially in mobile) ○ Find other ways to shrink the bundle size ● Use selectors ○ Interactions with SVG may have a high cost and often it means to heavily change the DOM ○ Many changes can be skipped with selectors ● Preact ○ does it work with Gatsby? ● Test ○ What to test? ○ There’s no critical path here
- 23. Have an idea? Want to contribute? https://github.com/dej611/abusi-edilizi-opendata
- 24. Open data for good Marco Liberati @dej611
- 25. ● Create-react-app: https://facebook.github.io/create-react-app/docs/getting-started ● Lighthouse: https://developers.google.com/web/tools/lighthouse/ ● vx: https://vx-demo.now.sh/ ● react-simple-maps: https://www.react-simple-maps.io/ ● IntersectionObserver: https://github.com/researchgate/react-intersection-observer ● GeoJSON => TopoJSON: https://github.com/topojson/topojson-server ● I18n: https://github.com/i18next/react-i18next ● Bulma: https://bulma.io/ ● Next.js: https://nextjs.org/ ● Now.sh: https://zeit.co/now ● Don’t build that app! : https://www.youtube.com/watch?v=mVjZQrsXBQE References and links: