How Cinema and Coding are Alike

Have you noticed how big is the magic behind the scenes in the cinema? The fact that the same artist can have a totally different face and behavior from one movie to another?

Now imagine all of that power in your hands. Being able to give a new face to your components and even a new behavior, based only on which application it is placed at. Wow, That's crazy, isn't it?

Let's see how to make the dreams come true using React + StyledComponents, to create a component lib able to make your apps look more stylish and give you a fun development experience.

Transcript

1. Sphere.it @ Krakow Rodolfo Dias presents How Cinema and Coding are Alike ?
2. “Hi, I’m Rodolfo!”
3. “Hi, I’m Rodolfo!”
4. Senior Frontend Engineer at ToolTime Google Developer Expert • Web technologies “Hi, I’m Rodolfo!”
5. @r_mdias
6. What are your three favourite movies?
7. What's the most interesting thing about each of them?
11. A true story
12. Hi, I’m Bruno! I’m a developer!
13. My responsibility is built and maintain a huge app which runs “under the covers" and makes the company work. This app has lost of functionalities and is really important for different departments in the company.
16. It’s too difficult to maintain…
18. I’ve heard about something called "Micro frontends”
19. I’ve heard about something called "Micro frontends”
20. I’ve heard about something called "Micro frontends”
21. I’m happy!
23. I had created the same component 3x, just this week… And each time I wrote the code using a different approach. 
 It’ seems like I’m repeating myself over and over.
24. Besides that, somehow each application has a different look. They belong to the same ecosystem, but they don’t show it. “They look like twins from different parents"
25. Besides that, somehow each application has a different look. They belong to the same ecosystem, but they don’t show it. “They look like twins from different parents"
26. Hey, I’m Sebastian
27. I read about something called styled components, and we could use it to build an Ui-lib with the things we use, and then use it across our applications as a NPM package…
28. I read about something called styled components, and we could use it to build an Ui-lib with the things we use, and then use it across our applications as a NPM package…
29. I read about something called styled components, and we could use it to build an Ui-lib with the things we use, and then use it across our applications as a NPM package…
30. I read about something called styled components, and we could use it to build an Ui-lib with the things we use, and then use it across our applications as a NPM package…
31. I read about something called styled components, and we could use it to build an Ui-lib with the things we use, and then use it across our applications as a NPM package… I’m happy!
32. Theta-React-Ui
33. LUNAUi
34. @sppiotrowski @rmdias @mogobruno
35. How is it built? How to use it? What are the benefits?
36. How is it built?
38. ?
40. [ React + styled components + jest ]
42. How to use it?
43. $ yarn add luna-ui
44. $ yarn add luna-ui-lib
45. ...
46. What are the benefits?
47. What are the benefits? Easy to manage UI components Code quality UI consistency
48. What are the benefits?
49. What are the benefits? <Image /> <Table /> <Button /> <Popup.ContextMenu /> <Table.Cell /> <Badge /> <Link /> <Hint />
51. Where to find it?
52. @sppiotrowski @rmdias @mogobruno github.com/luna-ui-lib/luna-ui
53. speakerdeck.com/rmdias
54. PRESENTED BY @r_mdias Sphere.it October 2019 [ Thanks ]