Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a modern front-end application for your project

97d21da8e0ffa8f81218a293482c253a?s=47 Matheus
December 13, 2020

Building a modern front-end application for your project

React has evolved into one of the biggest players in the JS ecosystem. In this workshop, we will take a look at how to use both React and TypeScript and discuss some of the bigger pitfalls and challenges in bringing these two technologies together—and why I think they could be a great fit for your projects on the next phase of TechLabs.

We’ll wrap up our day going through a sample application, its codebase, and learning from it!

97d21da8e0ffa8f81218a293482c253a?s=128

Matheus

December 13, 2020
Tweet

Transcript

  1. workshop weekend introduction.html Matheus Albuquerque @ythecombinator Web Development Track @BLN

  2. workshop weekend introduction.html Matheus Albuquerque @ythecombinator Web Development Track @BLN

    building a modern front-end app
  3. agenda • React • TypeScript • Hands on agenda.html

  4. goals goals.html

  5. The goal here is not to introduce you to React,

    TypeScript or any of the mentioned technologies. edyoucated—and other online resources—are there for this. goals.html goals
  6. Help you not commit the same mistakes I did when

    writing my first React applications. goals.html goals
  7. Help you build industry-standard apps as front-end for your ideas

    on the projects phase. goals.html goals
  8. Help you build applications that you won’t have to rewrite

    from scratch in case you want to maintain them after TechLabs. goals.html goals
  9. react • Application Structure • Styling • State Management •

    Tooling react.html
  10. application structure application_structure.html

  11. application_structure.html application structure Let's follow a regular create-react-app skeleton with

    very few modifications. Under the src folder, we have two main directories:
  12. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/
  13. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ Contains, as the name suggests, shared behavior, including…
  14. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ The main API client and also some data utilities (e.g. hooks for querying and mutating data)
  15. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ Images, CSS files, and other static assets
  16. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ Components reused across pages
  17. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ Main state management logic
  18. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ Reusable layouts
  19. application_structure.html application structure |-- shared/ | |-- api/ | |--

    assets/ | |-- components/ | |-- core/ | |-- layouts/ | |-- utils/ Helper functions reusable across the project
  20. application_structure.html application structure |-- modules/ | |-- auth/ | |--

    sign-in/ | | |-- ... | |-- sign-up/ | | |-- ... | |-- ...
  21. application_structure.html application structure |-- modules/ | |-- auth/ | |--

    sign-in/ | | |-- ... | |-- sign-up/ | | |-- ... | |-- ... These are each isolated functionality. Examples are:
  22. application_structure.html application structure |-- modules/ | |-- auth/ | |--

    sign-in/ | | |-- ... | |-- sign-up/ | | |-- ... | |-- ... Split into sign-in and sign-up
  23. application_structure.html application structure | |-- orders/ | |-- details/ |

    |-- components/ | |-- core/ | |-- hooks.ts | |-- models.ts | |-- index.ts Split into details and list
  24. application_structure.html application structure | |-- orders/ | |-- details/ |

    |-- components/ | |-- core/ | |-- hooks.ts | |-- models.ts | |-- index.ts Each module is organized in:
  25. application_structure.html application structure | |-- orders/ | |-- details/ |

    |-- components/ | |-- core/ | |-- hooks.ts | |-- models.ts | |-- index.ts Components relevant to that page
  26. application_structure.html application structure | |-- orders/ | |-- details/ |

    |-- components/ | |-- core/ | |-- hooks.ts | |-- models.ts | |-- index.ts The module state management logic
  27. application_structure.html application structure | |-- orders/ | |-- details/ |

    |-- components/ | |-- core/ | |-- hooks.ts | |-- models.ts | |-- index.ts Selectors, data access and mutation, and other hooks
  28. styling styling.html

  29. styling styling.html • UI Frameworks (e.g. Material UI) • CSS-in-JS

    (e.g. styled-components) • CSS preprocessors (e.g. SASS)
  30. state management state_management.html

  31. • Hooks + Context API • Third-party abstractions state management

    state_management.html
  32. state management state_management.html

  33. state management state_management.html

  34. state management state_management.html

  35. state management state_management.html

  36. tooling tooling.html • Routing • Forms • Data fetching •

    Deploying
  37. routing tooling.html

  38. routing tooling.html Routing is the process of keeping the browser

    URL in sync with what’s being rendered on the page.
  39. routing tooling.html React Router lets you handle routing declaratively. The

    declarative routing approach allows you to control the data flow in your application by saying “the route should look like this”.
  40. forms tooling.html

  41. forms tooling.html Forms play an integral role in our web

    applications.
  42. forms tooling.html Component-driven front-end libraries, like React, can ease the

    task of wiring web forms but can also get verbose and redundant.
  43. forms tooling.html Formik is a small library that solves the

    three most annoying parts of writing forms in React: • State manipulation • Form validation (and error messages) • Form submission
  44. forms tooling.html Also, it is our job to ensure that

    when users interact with the forms we set up, the data they send across is in the form we expect.
  45. forms tooling.html Yup is a JavaScript object schema validator. While

    it has many powerful features, we’ll focus on how it helps us create custom validation rules so we don’t have to.
  46. data fetching tooling.html

  47. data fetching tooling.html SWR is a lightweight library that allows

    fetching, caching, or refetching data in realtime using React hooks.
  48. data fetching tooling.html It’s built with React Suspense, which lets

    your components “wait” for something before they can render, including data.
  49. deploying tooling.html

  50. deploying tooling.html

  51. deploying tooling.html

  52. • Free • Free Private Repo Hosting • Free SSL

    • Free DNS • deploying tooling.html
  53. • Easy to use • Deploy in seconds • Continuous

    Deployment (CD) • Branch Deploys • Deploy Previews • deploying tooling.html
  54. • Asset Optimization • Custom Subdomains deploying tooling.html

  55. typescript • Advantages • Common concerns • Case Studies typescript.html

    • Typing your state • Typing your components • Typing your styles
  56. typescript • Advantages • Common concerns • Case Studies typescript.html

    • Typing your state • Typing your components • Typing your styles hands on!!!
  57. advantages advantages.html

  58. advantages • Code easier to understand • Code easier and

    faster to implement • Code easier to refactor • Fewer bugs advantages.html
  59. advantages • Less boilerplate tests • Aids the developer in

    having the correct workflow advantages.html
  60. concerns concerns.html

  61. concerns concerns.html • “It will harm our recruitment” • “On-boarding

    will take more time” • “By choosing TypeScript, we might end up being locked with some legacy tool, that nobody will support in the future”
  62. concerns concerns.html • “React (its environment) and TS doesn’t suit

    each other”
  63. case studies case studies.html

  64. case studies case studies.html

  65. case studies case studies.html

  66. case studies case studies.html

  67. case studies case studies.html

  68. case studies case studies.html

  69. case studies case studies.html

  70. case studies case studies.html

  71. case studies case studies.html

  72. case studies case studies.html

  73. case studies case studies.html

  74. hands on hands_on.html

  75. bye.html QUESTIONS?
 THOUGHTS?
 ANYTHING?

  76. slides.html

  77. slides.html

  78. slides.html https://speakerdeck.com/ythecombinator/ workshop-weekend-at-techlabs-react

  79. slides.html

  80. slides.html https://github.com/ythecombinator/ techlabs-workshop-weekend-2020

  81. me.html I am… Matheus Albuquerque
 Sr. Software Engineer, Front-End @STRV


    Web Development Track @BLN @ythecombinator www.ythecombinator.space land@ythecombinator.space
  82. bye.html that’s all for today THANKS folks