83 lines
1.3 KiB
Markdown
83 lines
1.3 KiB
Markdown
# React Meetup 2018-04-13
|
|
|
|
## [Sponsor] CONDA - Crowd Token
|
|
|
|
https://ico.conda.online/
|
|
|
|
## [Sponsor] Twigo
|
|
|
|
## A Common Design Language
|
|
|
|
> Let Designers & Developers talk to each other
|
|
|
|
Language is a system that consists of the development, acquisition, maintenance and use of complex systems of communication, particularly the human ability to do so; and a language is any specific example of such a system.
|
|
|
|
#### Components
|
|
|
|
|
|
#### Patterns
|
|
|
|
- Design Patterns
|
|
- but UI Patterns too
|
|
|
|
Common language primitives
|
|
|
|
<button> != <Button>
|
|
|
|
|
|
|
|
<p> != <Text>
|
|
|
|
<h1> != <Heading>
|
|
|
|
https://ant.design/
|
|
|
|
https://airbnb.io/react-sketchapp
|
|
|
|
https://airbnb.design/the-evolution-of-design
|
|
|
|
Figma
|
|
|
|
### How to implement common design language
|
|
|
|
- Just do it
|
|
|
|
1. UI inventory process
|
|
|
|
- Screenshot everything
|
|
- Isolate components
|
|
|
|
2. Development
|
|
|
|
- Styleguide
|
|
- design tokens
|
|
- lighningdesignsystem.com
|
|
- When use what type
|
|
- Examples
|
|
|
|
### Component driven development
|
|
|
|
## Hitchhikers guide to ReasonReact
|
|
|
|
### Why?
|
|
|
|
- 100% type coverage
|
|
- Type inferrence
|
|
- no null/undefined
|
|
- Immutability by default
|
|
- Variants
|
|
- Pattern matching
|
|
|
|
### Glossary
|
|
|
|
- Reason
|
|
- BuckleScript
|
|
|
|
Used to compile reason to javascript (or ocaml)
|
|
|
|
All modules are global.
|
|
Cant have multiple re files with the same module name.
|
|
|
|
### Reducer component
|
|
|
|
|