React Helsinki 2018
Workshop day by a front-end developer
MOI-moi đź‘‹
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
With Andrey Okonetchnikov and Artem Sapegin
What is the difference between German government website and the Austria one ?
The German version have a design system
In the Austria version it’s not the case.
The results?
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:
// DO
<Button primary> ... </Button>// DON'T
<button type="button" class="btn"> ... </button>
Exercices
You want to sharpen your skills and learn how to use Styleguidist? You can download the sources on GitHub
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
What do you think about expo?
Everybody,
at some point,
is ejecting from expo
Real world debugging
Real world deploy
Ressources
Thanks for reading! If you have feedback or suggestions, you can find me here:
- Twitter: https://twitter.com/_flexbox
- GitHub: https://github.com/flexbox
I Hope this motivates you to start hacking your next project. Just drop me a message if you have any questions — I would be glad to help you!
