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

Mais conteúdo relacionado

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

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

5 Steps to Ignite your Free-to-Play Revenue (without Advertising)
5 Steps to Ignite your Free-to-Play Revenue (without Advertising)5 Steps to Ignite your Free-to-Play Revenue (without Advertising)
5 Steps to Ignite your Free-to-Play Revenue (without Advertising)
 
Controlling your race with Micrometer and Spring Boot (live coding!)
Controlling your race with Micrometer and Spring Boot (live coding!)Controlling your race with Micrometer and Spring Boot (live coding!)
Controlling your race with Micrometer and Spring Boot (live coding!)
 
Controlling your race with Micrometer, Spring Boot and Cloud Foundry @Geekle
Controlling your race with Micrometer, Spring Boot and Cloud Foundry @GeekleControlling your race with Micrometer, Spring Boot and Cloud Foundry @Geekle
Controlling your race with Micrometer, Spring Boot and Cloud Foundry @Geekle
 
JavaLand - Micrometer and SpringBoot
JavaLand - Micrometer and SpringBootJavaLand - Micrometer and SpringBoot
JavaLand - Micrometer and SpringBoot
 
Controlling your race with Micrometer and Spring Boot / Micronaut (Brown Bag)
Controlling your race with Micrometer and Spring Boot / Micronaut (Brown Bag)Controlling your race with Micrometer and Spring Boot / Micronaut (Brown Bag)
Controlling your race with Micrometer and Spring Boot / Micronaut (Brown Bag)
 
"The Battle of the IDEs"
"The Battle of the IDEs""The Battle of the IDEs"
"The Battle of the IDEs"
 
Monitoring your Spring Boot and Micronaut microservices with Micrometer
Monitoring your Spring Boot and Micronaut microservices with MicrometerMonitoring your Spring Boot and Micronaut microservices with Micrometer
Monitoring your Spring Boot and Micronaut microservices with Micrometer
 
The Anatomy of Invisible Apps
The Anatomy of Invisible AppsThe Anatomy of Invisible Apps
The Anatomy of Invisible Apps
 
The 10,000 Steps of Open Source Project Health
The 10,000 Steps of Open Source Project HealthThe 10,000 Steps of Open Source Project Health
The 10,000 Steps of Open Source Project Health
 
Demystifying the 3d web - Codemotion 2016
Demystifying the 3d web - Codemotion 2016Demystifying the 3d web - Codemotion 2016
Demystifying the 3d web - Codemotion 2016
 
Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016
Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016
Demystifying the 3D Web by Pietro Grandi @ Codemotion Dubai 2016
 
Demistifying the 3D Web
Demistifying the 3D WebDemistifying the 3D Web
Demistifying the 3D Web
 
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
 
Yaniv Brosh (R&D Director, NeoGames) - Angular: Real Life Experience
Yaniv Brosh (R&D Director, NeoGames) - Angular: Real Life ExperienceYaniv Brosh (R&D Director, NeoGames) - Angular: Real Life Experience
Yaniv Brosh (R&D Director, NeoGames) - Angular: Real Life Experience
 
Fixing Broken Windows: Dealing with Legacy Systems, Poor Quality and Gaps
Fixing Broken Windows: Dealing with Legacy Systems, Poor Quality and GapsFixing Broken Windows: Dealing with Legacy Systems, Poor Quality and Gaps
Fixing Broken Windows: Dealing with Legacy Systems, Poor Quality and Gaps
 
Starting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackStarting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN Stack
 
Controlling your race with Micrometer, Spring Boot and Cloud Foundry
Controlling your race with Micrometer, Spring Boot and Cloud FoundryControlling your race with Micrometer, Spring Boot and Cloud Foundry
Controlling your race with Micrometer, Spring Boot and Cloud Foundry
 
Architecture in real
Architecture in realArchitecture in real
Architecture in real
 
Mobile (App) Development with Sitecore
Mobile (App) Development with SitecoreMobile (App) Development with Sitecore
Mobile (App) Development with Sitecore
 
Pieter Brinkman - My first mobile experience From mobile no no, to mobile go ...
Pieter Brinkman - My first mobile experienceFrom mobile no no, to mobile go ...Pieter Brinkman - My first mobile experienceFrom mobile no no, to mobile go ...
Pieter Brinkman - My first mobile experience From mobile no no, to mobile go ...
 

Mais de Dmitry Vinnik

Engineer in Test: Bridging the Gap
Engineer in Test: Bridging the GapEngineer in Test: Bridging the Gap
Engineer in Test: Bridging the Gap
Dmitry Vinnik
 

Mais de Dmitry Vinnik (20)

Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Appl...
Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Appl...Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Appl...
Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Appl...
 
Testing React with Jest: Validate Your Components Quickly!
Testing React with Jest: Validate Your Components Quickly!Testing React with Jest: Validate Your Components Quickly!
Testing React with Jest: Validate Your Components Quickly!
 
Documentation Made Easy with Docusaurus
Documentation Made Easy with DocusaurusDocumentation Made Easy with Docusaurus
Documentation Made Easy with Docusaurus
 
Testing at Scale at Meta and Salesforce
Testing at Scale at Meta and SalesforceTesting at Scale at Meta and Salesforce
Testing at Scale at Meta and Salesforce
 
Ent: Making Data Easy in Go
Ent: Making Data Easy in GoEnt: Making Data Easy in Go
Ent: Making Data Easy in Go
 
Better Start: Enforcing Best Engineering Practices with Kotlin
Better Start: Enforcing Best Engineering Practices with KotlinBetter Start: Enforcing Best Engineering Practices with Kotlin
Better Start: Enforcing Best Engineering Practices with Kotlin
 
Testing Svelte with Jest: Validate Your Components Quickly!
Testing Svelte with Jest: Validate Your Components Quickly!Testing Svelte with Jest: Validate Your Components Quickly!
Testing Svelte with Jest: Validate Your Components Quickly!
 
Developing Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptxDeveloping Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptx
 
Remote Work: Gateway to Freedom
Remote Work: Gateway to FreedomRemote Work: Gateway to Freedom
Remote Work: Gateway to Freedom
 
Kindness Engineering: Focusing on What Matters
Kindness Engineering: Focusing on What MattersKindness Engineering: Focusing on What Matters
Kindness Engineering: Focusing on What Matters
 
Gauge + Taiko, BDD for Web Revived
Gauge + Taiko, BDD for Web RevivedGauge + Taiko, BDD for Web Revived
Gauge + Taiko, BDD for Web Revived
 
Modern Web Testing: Going Beyond Selenium
Modern Web Testing: Going Beyond SeleniumModern Web Testing: Going Beyond Selenium
Modern Web Testing: Going Beyond Selenium
 
Do you even Function? Guiding Through Functional Interfaces
Do you even Function? Guiding Through Functional InterfacesDo you even Function? Guiding Through Functional Interfaces
Do you even Function? Guiding Through Functional Interfaces
 
From Robotium to Appium: Choose your Journey
From Robotium to Appium: Choose your Journey From Robotium to Appium: Choose your Journey
From Robotium to Appium: Choose your Journey
 
Stress Driven Development, and How to Avoid It
Stress Driven Development, and How to Avoid ItStress Driven Development, and How to Avoid It
Stress Driven Development, and How to Avoid It
 
Uphill Battle of Mobile Visual Regression
Uphill Battle of Mobile Visual RegressionUphill Battle of Mobile Visual Regression
Uphill Battle of Mobile Visual Regression
 
Engineer in Test: Bridging the Gap
Engineer in Test: Bridging the GapEngineer in Test: Bridging the Gap
Engineer in Test: Bridging the Gap
 
Domain Driven Testing: Know What You’re Doing
Domain Driven Testing: Know What You’re DoingDomain Driven Testing: Know What You’re Doing
Domain Driven Testing: Know What You’re Doing
 
Back to the CompletableFuture: Concurrency in Action
Back to the CompletableFuture: Concurrency in ActionBack to the CompletableFuture: Concurrency in Action
Back to the CompletableFuture: Concurrency in Action
 
Modern Web Testing: Going Beyond Selenium
Modern Web Testing: Going Beyond Selenium Modern Web Testing: Going Beyond Selenium
Modern Web Testing: Going Beyond Selenium
 

Último

CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
anilsa9823
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
mohitmore19
 

Último (20)

Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AISyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
TECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service providerTECUNIQUE: Success Stories: IT Service provider
TECUNIQUE: Success Stories: IT Service provider
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 

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

Notas do Editor

  1. Go to Site
  2. Go to https://www.w3schools.com/css/css3_flexbox.asp
  3. Go to Site
  4. Go to Site
  5. Go to Site
  6. Go to Site
  7. Will be sharing slides, github and useful links
  8. Will be sharing slides, github and useful links
  9. Will be sharing slides, github and useful links
  10. Will be sharing slides, github and useful links