It's no secret that people view the same website across many devices, browsers, and screen sizes. To make the same app work on all these platforms, developers have to spend a significant amount of time. If only there were an engine that allows web developers to write their code once and use it everywhere. Presenting Yoga, an open source, cross-platform layout engine that uses CSS layouts to manage user interfaces across platforms. In this talk, we learn about Yoga's main concepts and use-cases. Then, we will build a demo app for React Native and Android to showcase the reusability of Yoga.

1. Cross-Platform CSS
with Yoga
@DmitryVinnik 1

2. What do I do?
@DmitryVinnik 2

3. About Me
@DmitryVinnik
3

4. About Me
Open Source Developer Advocate
@DmitryVinnik
4

5. @DmitryVinnik
5

6. About Me
Open Source Developer Advocate
Mobile Focus: Android, iOS, Hybrid
@DmitryVinnik
6

7. @DmitryVinnik
7

8. @DmitryVinnik
8

9. @DmitryVinnik
9

10. @DmitryVinnik
10

11. About Me
Open Source Developer Advocate
Mobile Focus: Android, iOS, Hybrid
Passionate about Open Source
@DmitryVinnik
11

12. Meta Open Source
@DmitryVinnik 12

13. What are our goals
for today?
@DmitryVinnik 13

14. Goals

15. Goals
Basics of Flexbox and Layouts

16. Goals
Basics of Flexbox and Layouts
Learning Yoga 101

17. Goals
Basics of Flexbox and Layouts
Learning Yoga 101
Cross Platform Yoga in Action

18. What is
Yoga?
@DmitryVinnik 18

19. @DmitryVinnik 19

20. Yoga
@DmitryVinnik 20

21. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 21

22. Let’s step back
@DmitryVinnik 22

23. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 23

24. @DmitryVinnik 24

25. @DmitryVinnik 25

26. @DmitryVinnik 26

27. @DmitryVinnik 27

28. @DmitryVinnik 28

29. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 29

30. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 30

31. What is Layout?
@DmitryVinnik 31

32. Layout defines the structure for
a user interface in your app
@DmitryVinnik 32

33. @DmitryVinnik 33
Source: https://bit.ly/3FvL9Wl

34. @DmitryVinnik 34

35. @DmitryVinnik 35

36. @DmitryVinnik 36

37. @DmitryVinnik 37

38. @DmitryVinnik 38

39. @DmitryVinnik 39

40. @DmitryVinnik 40

41. What does mean for
Layouts?
@DmitryVinnik 41

42. Challenges MP Layouts
42
@DmitryVinnik

43. Challenges MP Layouts
43
Multiple
Codebases
@DmitryVinnik

44. Challenges MP Layouts
44
Multiple
Codebases
Different OS
@DmitryVinnik

45. Challenges MP Layouts
45
Array of Target
Screens
Multiple
Codebases
Different OS
@DmitryVinnik

46. Challenges MP Layouts
46
Array of Target
Screens
Different
Expectations
Multiple
Codebases
Different OS
@DmitryVinnik

47. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 47

48. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 48

49. CSS, or
Cascading Style Sheets
@DmitryVinnik 49

50. Describes how UI elements
are to be displayed on screens
@DmitryVinnik 50

51. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 51

52. Cross-platform layout engine that
manages UIs across platforms by
reusing CSS layouts
@DmitryVinnik 52

53. And all of this is
@DmitryVinnik 53

54. Yoga
@DmitryVinnik 54

55. Based on Flexbox CSS
@DmitryVinnik 55

56. @DmitryVinnik 56
Source: https://bit.ly/3l8iVt5

57. Why Yoga?
57
@DmitryVinnik

58. Why Yoga?
58
Performance
@DmitryVinnik

59. Why Yoga?
59
Performance
Cross
Platform
@DmitryVinnik

60. Why Yoga?
60
Easy to Learn
Performance
Cross
Platform
@DmitryVinnik

61. Why Yoga?
61
Easy to Learn
Open Source
Adoption
Performance
Cross
Platform
@DmitryVinnik

62. @DmitryVinnik 62

63. @DmitryVinnik 63

64. @DmitryVinnik 64

65. @DmitryVinnik 65

66. Demo Time!
@DmitryVinnik 66

67. Call to Action
@DmitryVinnik 67

68. Call to Action
Visit Yoga
Website
@DmitryVinnik 68

69. Call to Action
Visit Yoga
Website
Join Yoga
Community
@DmitryVinnik 69

70. Call to Action
Visit Yoga
Website
Join Yoga
Community
Continue
Learning
@DmitryVinnik 70

71. About Speaker
Twitter: @DmitryVinnik
Blog: dvinnik.dev
LinkedIn: in/dmitry-vinnik/
Email: dmitry@dvinnik.dev
71