SlideShare uma empresa Scribd logo
1 de 39
Baixar para ler offline
Mendix React Native &
JavaScript actions
Lessons learned so far
Tim Mulders
React (Native) Developer
TouchTribe
Tim Vredevoort
Mendix Consultant
WebFlight
Agenda
1. Tim & Tim
2. Today’s goal
3. Motive
4. Challenges (React Native & JavaScript actions)
5. Preliminary conclusion
6. Questions and discussion
Tim & Tim
• Mulders (Handsome Tim)
• React (Native) Developer
• TouchTribe
Multiple React Native Apps
• Vredevoort (Other Tim)
• Mendix Developer (expert)
• WebFlight
Hybrid Mobile Apps
Today’s goal
Motive: why did we do this?
Motive: why did we do this?
Mr. Client
Motive: why did we do this?
“Is it possible to create a customer-facing application with Mendix
React Native?”
Mr. Client
Motive: Why did we do this?
Tim Tim
Motive: Why did we do this?
Tim Tim
PoC!
Goal of PoC
1. Can we implement a design pixel-perfectly?
2. Can we build the required functionality using Mendix?
3. How is the developer experience?
We were given a concept design …
•
Pixel-perfection (1)
• Styling of the basic Mendix Components
Pixel-perfection (1)
• Styling of the basic Mendix Components
Pixel-perfection (2)
• Building custom React Native widgets
Pixel-perfection (2)
To the code!
Pixel-perfection (2)
Pixel-perfection (2)
Pixel-perfection (2)
Can we build the functionality?
Can we build the functionality?
So how are we going to do this?
!
So how are we going to do this?
!
What about nanoflows?
•
What about nanoflows?
•
What about nanoflows?
•
JavaScript action!
JavaScript action!
JavaScript action - code
• Tada 🎉
JavaScript action - code
JavaScript action - observations
• // BEGIN USER CODE and // END USER CODE
JavaScript action - observations
• // BEGIN USER CODE and // END USER CODE
JavaScript action - observations
• Separate reusable functions
• // BEGIN USER CODE and // END USER CODE
JavaScript action - observations
• Separate reusable functions
• Modern usage of libraries
JavaScript action - result
Lessons learned so far
Lessons learned so far
1. Every Mendix Developer can build a simple React Native app*
Lessons learned so far
2. Pixel-perfection requires React (Native) skills*
1. Every Mendix Developer can build a simple React Native app*
Lessons learned so far
2. Pixel-perfection requires React (Native) skills*
1. Every Mendix Developer can build a simple React Native app*
3. Workflow and tooling is different, especially for React Native
developers
Any questions?

Mais conteúdo relacionado

Mais procurados

cpbricks context diagram
cpbricks context diagramcpbricks context diagram
cpbricks context diagrami i
 
Accelerate digital transformation using low code platforms
Accelerate digital transformation using low code platformsAccelerate digital transformation using low code platforms
Accelerate digital transformation using low code platformsWaveMaker, Inc.
 
Kris de Waal - Best practices voor integratie Relatics met een DMS
Kris de Waal - Best practices voor integratie Relatics met een DMSKris de Waal - Best practices voor integratie Relatics met een DMS
Kris de Waal - Best practices voor integratie Relatics met een DMSRelatics
 
Microsoft Power Apps - A Getting Started Guide
Microsoft Power Apps - A Getting Started GuideMicrosoft Power Apps - A Getting Started Guide
Microsoft Power Apps - A Getting Started GuidePaul Barnett
 
Enterprise architecture-career-path
Enterprise architecture-career-pathEnterprise architecture-career-path
Enterprise architecture-career-pathSim Kwan Choo
 
Unicode: Os segredos da Codificação de Caracteres
Unicode: Os segredos da Codificação de CaracteresUnicode: Os segredos da Codificação de Caracteres
Unicode: Os segredos da Codificação de CaracteresDouglas V. Pasqua
 
Practical DoDAF Presentation to INCOSE WMA
Practical DoDAF Presentation to INCOSE WMA Practical DoDAF Presentation to INCOSE WMA
Practical DoDAF Presentation to INCOSE WMA Elizabeth Steiner
 
ArchiSurance Case Study
ArchiSurance Case StudyArchiSurance Case Study
ArchiSurance Case StudyIver Band
 

Mais procurados (9)

cpbricks context diagram
cpbricks context diagramcpbricks context diagram
cpbricks context diagram
 
Mendix Platform
Mendix PlatformMendix Platform
Mendix Platform
 
Accelerate digital transformation using low code platforms
Accelerate digital transformation using low code platformsAccelerate digital transformation using low code platforms
Accelerate digital transformation using low code platforms
 
Kris de Waal - Best practices voor integratie Relatics met een DMS
Kris de Waal - Best practices voor integratie Relatics met een DMSKris de Waal - Best practices voor integratie Relatics met een DMS
Kris de Waal - Best practices voor integratie Relatics met een DMS
 
Microsoft Power Apps - A Getting Started Guide
Microsoft Power Apps - A Getting Started GuideMicrosoft Power Apps - A Getting Started Guide
Microsoft Power Apps - A Getting Started Guide
 
Enterprise architecture-career-path
Enterprise architecture-career-pathEnterprise architecture-career-path
Enterprise architecture-career-path
 
Unicode: Os segredos da Codificação de Caracteres
Unicode: Os segredos da Codificação de CaracteresUnicode: Os segredos da Codificação de Caracteres
Unicode: Os segredos da Codificação de Caracteres
 
Practical DoDAF Presentation to INCOSE WMA
Practical DoDAF Presentation to INCOSE WMA Practical DoDAF Presentation to INCOSE WMA
Practical DoDAF Presentation to INCOSE WMA
 
ArchiSurance Case Study
ArchiSurance Case StudyArchiSurance Case Study
ArchiSurance Case Study
 

Semelhante a Mendix React Native & Javascript actions - Lessons learned

l1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfl1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfHương Trà Pé Xjnk
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptKobkrit Viriyayudhakorn
 
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...Heiko Voigt
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with reduxMike Melusky
 
MyAppConverter DroidconUK 2014
MyAppConverter DroidconUK 2014MyAppConverter DroidconUK 2014
MyAppConverter DroidconUK 2014myappconverter
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Adrian Philipp
 
Webinar on How to use MyAppConverter
Webinar on How to use  MyAppConverterWebinar on How to use  MyAppConverter
Webinar on How to use MyAppConverterJaoued Ahmed
 
UCCSC 2016
UCCSC 2016UCCSC 2016
UCCSC 2016Alex Wu
 
java internshijnkjgkyhjytrctgjngp ppt.pdf
java internshijnkjgkyhjytrctgjngp ppt.pdfjava internshijnkjgkyhjytrctgjngp ppt.pdf
java internshijnkjgkyhjytrctgjngp ppt.pdframkishun1711
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile AppMobio Solutions
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptKevin Read
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Kevin Read
 
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)James Ide
 
Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedVinci Rufus
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Indiginox
 
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Phil Leggetter
 
React Native - Framework For Mobile App (Seminar)
React Native - Framework For Mobile App (Seminar)React Native - Framework For Mobile App (Seminar)
React Native - Framework For Mobile App (Seminar)Jaise P Jose
 

Semelhante a Mendix React Native & Javascript actions - Lessons learned (20)

l1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfl1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdf
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
 
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
 
MyAppConverter DroidconUK 2014
MyAppConverter DroidconUK 2014MyAppConverter DroidconUK 2014
MyAppConverter DroidconUK 2014
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016
 
Webinar on How to use MyAppConverter
Webinar on How to use  MyAppConverterWebinar on How to use  MyAppConverter
Webinar on How to use MyAppConverter
 
UCCSC 2016
UCCSC 2016UCCSC 2016
UCCSC 2016
 
java internshijnkjgkyhjytrctgjngp ppt.pdf
java internshijnkjgkyhjytrctgjngp ppt.pdfjava internshijnkjgkyhjytrctgjngp ppt.pdf
java internshijnkjgkyhjytrctgjngp ppt.pdf
 
React Native - Build Native Mobile App
React Native - Build Native Mobile AppReact Native - Build Native Mobile App
React Native - Build Native Mobile App
 
Erica Cooksey Reactathon 2018
Erica Cooksey Reactathon 2018Erica Cooksey Reactathon 2018
Erica Cooksey Reactathon 2018
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
 
Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8Embedding V8 in Android apps with Ejecta-V8
Embedding V8 in Android apps with Ejecta-V8
 
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
React Native is Ready for Prime Time — Team × Technology (React Conf 2016)
 
Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased based
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?
 
Meteor meetup
Meteor meetupMeteor meetup
Meteor meetup
 
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
 
React Native - Framework For Mobile App (Seminar)
React Native - Framework For Mobile App (Seminar)React Native - Framework For Mobile App (Seminar)
React Native - Framework For Mobile App (Seminar)
 

Último

Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기Chiwon Song
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 

Último (20)

Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 

Mendix React Native & Javascript actions - Lessons learned