React Helsinki 2018
Workshop day by a front-end developer
This week I am in Finland to learn a new langage an improving my skill in React and React Native. On this article, I am going to share with you my notes and links about the first day of workshop.
You want to improve your design skills?
Follow the advices about Styleguide Design Developement.
If you are more in the mobile world, I have some useful links for you.
In short, here is the twitter feed of this great event.
Component Design Workshop
What is the difference between German government website and the Austria one ?
The German version have a design system
Startseite Styleguide der Bundesregierungstyleguide.bundesregierung.de
In the Austria version it’s not the case.
No consistency in terms of branding and the users needs to “learn” how to use the website every time because there is no pattern for navigation.
Why do I need a Design System?
Take the example of Lego. They are using bricks (aka primitives) to build almost everything. It’s perfect for a design system, with basic things you can build different products.
If I use a Design System it’s gonna slow down the development of my product.
I agreed with this point for new projects.
But, the more you are going to add features / components / content on your website / application, more duplications are going to be introduce.
The codebase is growing, hard to maintain.
At the end of the day, It takes more time without style guide.
And we didn’t talk about how to educate and scale the team working on your project.
The broken windows theory is a criminological theory that visible signs of crime, anti-social behavior and civil disorder create an urban environment that encourages further crime and disorder. We don’t want the same for our codebase
The broken window theory
Ok, I am convinced now. Where should I start?
Style Guide Design Workflow
1. Content Inventory
Take screenshots and isolate all the components of your UI.
You can use the anotate app
2. Build a roadmap
Now that you have a list off screenshots, it’s time to make a plan and use this GitHub issue template.
Remeber that Style Guides are the single source of truth.
3. Choose your tool
Components are primitives
You can compose components from primitives
- Human friendly API
- Easier to communicate the intent via code
- Easy to fix or refactor all instances at once
- Enforce the design across the application
Don’t make CSS class names as an API, instead use primitives:
<Button primary> ... </Button>
<button type="button" class="btn"> ... </button>
You want to sharpen your skills and learn how to use
Styleguidist? You can download the sources on GitHub
component-driven-development - Component-driven Development example appgithub.com
In the meantime, I updated my mind-mapping about Design System
React Native Workshop
With Gant Laborde
Don’t use button, use TouchableHightlight instead
Dealing with the state of your react native app
ReactStateMuseum — A whirlwind tour of React state management systems by examplegithub.com
What do you think about expo?
at some point,
is ejecting from expo
Real world debugging
reactotron — A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.github.com