Photo by chuttersnap
2018 is ending, I will do a quick review of the personal projects I worked on the last 12 months, in order to keep track of what I accomplished over the last year.
I worked on 3 main personal projects over this past year:
There are lots of great resources on React (tutorials, blog posts, books, videos …), but most of them focus on a specific problem. Today, making an app is a lot about picking and putting building blocks together:
- choosing and setting up external libraries (UI kits, state management, http clients, routers …)
- enabling code quality good practices (linting, testing, git hooks, cis …)
- automation / dev pipeline
The hard part is to put this all together. This is the goal of this project: provide a well-documented example of a front-end app with real-world features and constraints.
The goal of this project is to let you discover docker/docker-compose with a simple use case in development, production (local kubernetes) and CI. I provide a highly documented README which I use myself as a reference.
The project itself ships:
- a frontend made with create-react-app, running in a nodejs container for development
- nginx setup as reverse proxy on the production image
At the time I’m writting this post, data fetching with Suspense is still not yet enabled in React (not even in alpha versions), Suspense is only available for code splitting (v16.8.0-alpha.1).
In march 2018, Dan Abramov presented for the very first time React Suspense. A month later, Andrew Clark made an other talk about Suspense, more oriented on placeholders.
In august 2018, Ryan Florence made a talk about route recalculating, where he presents how @reach/router can work with React Suspense.
In september 2018 (at this time, react was in v16.5.0), I decided to make a project based on the data fetching and code splitting features of Suspense to better understand the benefits of those features and expose them to other developers (since this will be a game changing for data fetching in React).
This year I made a few talks at local meetups:
- Pourquoi j’ai fait topheman/npm-registry-browser (fr) / Slides
- Discover React Suspense with topheman/react-fiber-experiments (fr) / Slides
- 📺 Enregistrer un Screencast / Slides
Utils / Boilerplates
- topheman/delay-proxy: A little development tool that lets you emulate slow network connections
- topheman/my-react-app-starter: create-react-app is a great toolkit which removes a lot of boilerplate to manage. I added a few features that I was missing like: eslint/prettier/precommit hook, generate changelog, deploy task …
- topheman/fullstack-setup: research repo about formatting automation
The main guideline I followed this year was to ship projects that take in account the constraints you would have developing in team (even if I was working alone):
- formatting and linting enforced at precommit-hook: thanks to prettier and eslint, no more discussion about code style on PRs!
- dev experience: accessible npm tasks install / start / build / test / deploy … more specific ones should be documented
- unit tests
- end to end tests: thanks to Cypress (read Cypress.io advanced setup)
- CI: automatic deployment
This is the first time I’ve done a screencast. It was an interesting experience (doing it in english, not in french 😉 ).
In 2019, I will try TypeScript – I already used it a little 3 years ago in topheman/angular2-sandbox to test angular@2 and ngrx, but now is definitely the time to check it out.