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!

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