Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Construindo interfaces interativas com React
Search
14islands
October 09, 2019
Programming
0
73
Construindo interfaces interativas com React
14islands
October 09, 2019
Tweet
Share
More Decks by 14islands
See All by 14islands
Sneaky Santa
14islands
0
48
Innovation & Prototyping
14islands
0
160
Google Santa Tracker: Present Bounce
14islands
0
240
Responsive Web Design Recap
14islands
8
1.4k
Lessons learned using WordPress as a CMS
14islands
2
950
The good, the bad and the ugly with responsive web design
14islands
4
1.9k
Faster Responsive Websites
14islands
2
330
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Programming
See All in Programming
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
580
バッチを作らなきゃとなったときに考えること
irof
0
390
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
Unity Android XR入門
sakutama_11
0
170
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
Formの複雑さに立ち向かう
bmthd
1
890
GAEログのコスト削減
mot_techtalk
0
120
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
200
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
BBQ
matthewcrist
87
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Bash Introduction
62gerente
611
210k
For a Future-Friendly Web
brad_frost
176
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
A Tale of Four Properties
chriscoyier
158
23k
Transcript
Construindo interfaces interativas com React
Interação de usuário é como o usuário interage com a
interface e como a interface reage com o usuário.
Interação de usuário é como o usuário interage com a
interface e como a interface reage com o usuário. Scroll Hover Drag Click… Render Animate…
Somos a
None
None
None
✈ "
✈ ☀ ☁
✈ " ✈ ⛄
☀ ☀ ✌
None
O nosso processo
React é uma biblioteca de JavaScript declarativa, eficiente e flexível
para construir interfaces de usuário.
Componentes auxiliam a organizar a arquitetura. Uma língua comum entre
design e desenvolvimento.
SCREENSHOT OF PROXY ARCH?
None
Prototype Inspect
None
None
Estrutura dos componentes
None
Component.js Component.story* Component.module.css index.js Component 1 Components Component 1 Component
2 Component 3
None
None
Componentes funcionais + hooks ( Yes, please.
None
None
Implementando animaçōes
Tenha regras bem definidas sobre como implementar.
Nenhuma animação é melhor que uma mal feita.
Mexa apenas no opacity e transform.
Position transform: translate(npx, npx); Scale transform: scale(n); Rotation transform: rotate(ndeg);
Opacity opacity: 0…1;
None
None
None
None
None
None
None
None
O ciclo do React, apesar de flexível, não é o
suficiente para orquestrar a ordem das coisas.
Algumas libs animam os valores fora do ciclo do React,
para melhor performance.
Orquestrando com refs.
None
Orquestrando com componentes.
None
Se necessário, FLIP it.
Caso necessário, FLIP it.
isFullScreen: false
min-height: 400px position: relative …
isFullScreen: true
position: fixed top: 0 left: 0 width: 100% height: 100%
isFullScreen: false 01 First
02 Last
03 Invert
https://aerotwist.com/blog/flip-your-animations/
None
None
Jogue a responsa no After Effects.
None
None
None
None
None
Algumas dicas
awesome-react-components
React DevTools
React DevTools
Analise a performance
Libs que recomendamos.
+
Obrigado!