Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cross-Platform CSS (Yes, it's Possible!) with Yoga

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 71 Ad

Cross-Platform CSS (Yes, it's Possible!) with Yoga

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

More from Dmitry Vinnik (15)

Recently uploaded (20)

Advertisement

Cross-Platform CSS (Yes, it's Possible!) with Yoga

  1. 1. Cross-Platform CSS with Yoga @DmitryVinnik 1
  2. 2. What do I do? @DmitryVinnik 2
  3. 3. About Me @DmitryVinnik 3
  4. 4. About Me Open Source Developer Advocate @DmitryVinnik 4
  5. 5. @DmitryVinnik 5
  6. 6. About Me Open Source Developer Advocate Mobile Focus: Android, iOS, Hybrid @DmitryVinnik 6
  7. 7. @DmitryVinnik 7
  8. 8. @DmitryVinnik 8
  9. 9. @DmitryVinnik 9
  10. 10. @DmitryVinnik 10
  11. 11. About Me Open Source Developer Advocate Mobile Focus: Android, iOS, Hybrid Passionate about Open Source @DmitryVinnik 11
  12. 12. Meta Open Source @DmitryVinnik 12
  13. 13. What are our goals for today? @DmitryVinnik 13
  14. 14. Goals
  15. 15. Goals Basics of Flexbox and Layouts
  16. 16. Goals Basics of Flexbox and Layouts Learning Yoga 101
  17. 17. Goals Basics of Flexbox and Layouts Learning Yoga 101 Cross Platform Yoga in Action
  18. 18. What is Yoga? @DmitryVinnik 18
  19. 19. @DmitryVinnik 19
  20. 20. Yoga @DmitryVinnik 20
  21. 21. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 21
  22. 22. Let’s step back @DmitryVinnik 22
  23. 23. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 23
  24. 24. @DmitryVinnik 24
  25. 25. @DmitryVinnik 25
  26. 26. @DmitryVinnik 26
  27. 27. @DmitryVinnik 27
  28. 28. @DmitryVinnik 28
  29. 29. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 29
  30. 30. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 30
  31. 31. What is Layout? @DmitryVinnik 31
  32. 32. Layout defines the structure for a user interface in your app @DmitryVinnik 32
  33. 33. @DmitryVinnik 33 Source: https://bit.ly/3FvL9Wl
  34. 34. @DmitryVinnik 34
  35. 35. @DmitryVinnik 35
  36. 36. @DmitryVinnik 36
  37. 37. @DmitryVinnik 37
  38. 38. @DmitryVinnik 38
  39. 39. @DmitryVinnik 39
  40. 40. @DmitryVinnik 40
  41. 41. What does mean for Layouts? @DmitryVinnik 41
  42. 42. Challenges MP Layouts 42 @DmitryVinnik
  43. 43. Challenges MP Layouts 43 Multiple Codebases @DmitryVinnik
  44. 44. Challenges MP Layouts 44 Multiple Codebases Different OS @DmitryVinnik
  45. 45. Challenges MP Layouts 45 Array of Target Screens Multiple Codebases Different OS @DmitryVinnik
  46. 46. Challenges MP Layouts 46 Array of Target Screens Different Expectations Multiple Codebases Different OS @DmitryVinnik
  47. 47. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 47
  48. 48. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 48
  49. 49. CSS, or Cascading Style Sheets @DmitryVinnik 49
  50. 50. Describes how UI elements are to be displayed on screens @DmitryVinnik 50
  51. 51. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 51
  52. 52. Cross-platform layout engine that manages UIs across platforms by reusing CSS layouts @DmitryVinnik 52
  53. 53. And all of this is @DmitryVinnik 53
  54. 54. Yoga @DmitryVinnik 54
  55. 55. Based on Flexbox CSS @DmitryVinnik 55
  56. 56. @DmitryVinnik 56 Source: https://bit.ly/3l8iVt5
  57. 57. Why Yoga? 57 @DmitryVinnik
  58. 58. Why Yoga? 58 Performance @DmitryVinnik
  59. 59. Why Yoga? 59 Performance Cross Platform @DmitryVinnik
  60. 60. Why Yoga? 60 Easy to Learn Performance Cross Platform @DmitryVinnik
  61. 61. Why Yoga? 61 Easy to Learn Open Source Adoption Performance Cross Platform @DmitryVinnik
  62. 62. @DmitryVinnik 62
  63. 63. @DmitryVinnik 63
  64. 64. @DmitryVinnik 64
  65. 65. @DmitryVinnik 65
  66. 66. Demo Time! @DmitryVinnik 66
  67. 67. Call to Action @DmitryVinnik 67
  68. 68. Call to Action Visit Yoga Website @DmitryVinnik 68
  69. 69. Call to Action Visit Yoga Website Join Yoga Community @DmitryVinnik 69
  70. 70. Call to Action Visit Yoga Website Join Yoga Community Continue Learning @DmitryVinnik 70
  71. 71. About Speaker Twitter: @DmitryVinnik Blog: dvinnik.dev LinkedIn: in/dmitry-vinnik/ Email: dmitry@dvinnik.dev 71

Editor's Notes

  • Go to Site
  • Go to https://www.w3schools.com/css/css3_flexbox.asp
  • Go to Site
  • Go to Site
  • Go to Site
  • Go to Site
  • Will be sharing slides, github and useful links
  • Will be sharing slides, github and useful links
  • Will be sharing slides, github and useful links
  • Will be sharing slides, github and useful links

×