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.
Projects
I worked on 3 main personal projects over this past year:
topheman/npm-registry-browser 🔗
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.
Related:
topheman/docker-experiments 🔗
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
- a very simple api made in go (the challenge was also not to have everything in JavaScript)
- nginx setup as reverse proxy on the production image
Related:
topheman/react-fiber-experiments 🔗
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).
Related:
Talks
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
Overall
This year, I worked a lot on React (I like this library and I’ve been working with it for almost 4 years). I also got deeper into docker with topheman/docker-experiments (every year, I like to pick a technology outside of JavaScript and do a little more than just a Hello World 😉 ).
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 😉 ).
Next
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.
