SlideShare a Scribd company logo
React
a revolution in Web UI technology
@redbadgerteam
“strong opinions,

which are weakly held”
Paul Saffo, Director of Palo Alto’s Institute for the Future
Give it 5 minutes
• He said “Man, give it five minutes.” I asked him
what he meant by that? He said, it’s fine to
disagree, it’s fine to push back, it’s great to have
strong opinions and beliefs, but give my ideas
some time to set in before you’re sure you want to
argue against them.
• https://signalvnoise.com/posts/3124-give-it-five-
minutes
Stuart Harris
CIO, Founder Red Badger
@stuartharris
London React Meetup
Give it 5 minutes
Client
Server
Isomorphic (or Universal) rendering
Virtual DOM
• The DOM is slow, has an imperative API and State
• A COMPONENT should be fast, declarative, stateless
• “Shared mutable state changing over time is the root
of all evil”
• A virtual DOM allows you to declare your UI
• The UI becomes a projection of your model
• Conceptually re-rendered on EVERY change
f(d) = v
f(d’) = v’
diff(v, v’) => changes
diff(v’, v) => undo
WOW
• This completely changes the way I think about my
application
• Very much like immediate mode games rendering
• Declarative
• Delegated event model
DEMO
What about MVC?
• Incorrect separation of concerns
• Is React the “V” in MVC?
• “Components” is a better SoC
• What about Web Components? (polymer etc)
Peter Hunt (Code Winds Podcast)
“There is a lot of stuff you get for free when you
build like the browser doesn’t exist and this is
one thing that distinguishes React from Web
Components and Polymer and that kind of thing
…they’re getting closer and closer in with the
browser, and we’re getting farther and farther
from the browser. And I think that our technique
is more sustainable in the long term.”
Render to any surface
• react-native
• react-art
• react-canvas
• react-three
• Netflix TV
• React 0.14
• npm install react@0.14.0-beta1
• npm install react-dom@0.14.0-beta1
–The Facebook React team
“Learn once, write anywhere”
But it’s only the “View”
• Flux
• Relay and GraphQL
• Om and Om.next
• Redux
• Arch
Flux
Single direction flow
Relay and GraphQL
Functional?
• Pure render function
• shouldComponentUpdate
• Immutable data (immutable.js, mori)
• Stateless components
• Centralised application state
Tooling
• Nuclide
• Jest
• Atom, Babel (JSX)
• Flow
• React Dev Tools for Chrome and Firefox
DEMO
So where is all this going?
• Towards more semantic UI declarations
• Separation of UI definition from rendering (0.14)
• Multiplatform - learn once write everywhere
• More functional
Stuart Harris
CIO, Founder Red Badger
@stuartharris

More Related Content

What's hot

Ohoh
OhohOhoh
Mobile CI at Etsy
Mobile CI at EtsyMobile CI at Etsy
Mobile CI at Etsy
Daniel Schauenberg
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
Symetris
 
RapidDev - Develop Titanium apps at the speed of the web!
RapidDev - Develop Titanium apps  at the speed of the web!RapidDev - Develop Titanium apps  at the speed of the web!
RapidDev - Develop Titanium apps at the speed of the web!
Matt Apperson
 
improving the performance of Rails web Applications
improving the performance of Rails web Applicationsimproving the performance of Rails web Applications
improving the performance of Rails web Applications
John McCaffrey
 
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
GreeceJS
 
Webhooks with Azure Functions - Live 360 Conference
Webhooks with Azure Functions - Live 360 ConferenceWebhooks with Azure Functions - Live 360 Conference
Webhooks with Azure Functions - Live 360 Conference
SparkPost
 
DevOps and Performance - Why, How and Best Practices - DevOps Meetup Sydney
DevOps and Performance - Why, How and Best Practices - DevOps Meetup SydneyDevOps and Performance - Why, How and Best Practices - DevOps Meetup Sydney
DevOps and Performance - Why, How and Best Practices - DevOps Meetup Sydney
Andreas Grabner
 
DevOps: Getting Started with Puppet on Windows
DevOps: Getting Started with Puppet on WindowsDevOps: Getting Started with Puppet on Windows
DevOps: Getting Started with Puppet on Windows
Rob Reynolds
 
OpenStack Israel Summit 2013 - It’s the App, Stupid!
OpenStack Israel Summit 2013 - It’s the App, Stupid! OpenStack Israel Summit 2013 - It’s the App, Stupid!
OpenStack Israel Summit 2013 - It’s the App, Stupid!
Uri Cohen
 
Using Axe to Add Accessibility Checks to Your Existing Selenium Tests
Using Axe to Add Accessibility Checks to Your Existing Selenium TestsUsing Axe to Add Accessibility Checks to Your Existing Selenium Tests
Using Axe to Add Accessibility Checks to Your Existing Selenium Tests
Sauce Labs
 
The Importance of Culture: Building and Sustaining Effective Engineering Org...
The Importance of Culture:  Building and Sustaining Effective Engineering Org...The Importance of Culture:  Building and Sustaining Effective Engineering Org...
The Importance of Culture: Building and Sustaining Effective Engineering Org...
Randy Shoup
 
Pragmatic Continuous Delivery - ReaktorDevDay 2012
Pragmatic Continuous Delivery - ReaktorDevDay 2012Pragmatic Continuous Delivery - ReaktorDevDay 2012
Pragmatic Continuous Delivery - ReaktorDevDay 2012
Neeme Praks
 
[Christopher Ngo] Intro DevOPS XP Day 2015
[Christopher Ngo] Intro DevOPS XP Day 2015[Christopher Ngo] Intro DevOPS XP Day 2015
[Christopher Ngo] Intro DevOPS XP Day 2015
Agile đây Vietnam
 
Automated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchAutomated Acceptance Testing from Scratch
Automated Acceptance Testing from Scratch
Excella
 
Webinar: A Sneak Peek at Selenium 4 with Simon Stewart
Webinar: A Sneak Peek at Selenium 4 with Simon StewartWebinar: A Sneak Peek at Selenium 4 with Simon Stewart
Webinar: A Sneak Peek at Selenium 4 with Simon Stewart
Sauce Labs
 
Evoloution of Ideas
Evoloution of IdeasEvoloution of Ideas
Evoloution of Ideas
Wooga
 
The DevOps Journey at bwin.party
The DevOps Journey at bwin.partyThe DevOps Journey at bwin.party
The DevOps Journey at bwin.party
Kelly Looney
 
Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126
Mike Hillwig
 
PSU Web 2014: UX and Design Tools That Will Improve Your Productivity
PSU Web 2014: UX and Design Tools That Will Improve Your ProductivityPSU Web 2014: UX and Design Tools That Will Improve Your Productivity
PSU Web 2014: UX and Design Tools That Will Improve Your Productivity
Jennifer Aldrich
 

What's hot (20)

Ohoh
OhohOhoh
Ohoh
 
Mobile CI at Etsy
Mobile CI at EtsyMobile CI at Etsy
Mobile CI at Etsy
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
 
RapidDev - Develop Titanium apps at the speed of the web!
RapidDev - Develop Titanium apps  at the speed of the web!RapidDev - Develop Titanium apps  at the speed of the web!
RapidDev - Develop Titanium apps at the speed of the web!
 
improving the performance of Rails web Applications
improving the performance of Rails web Applicationsimproving the performance of Rails web Applications
improving the performance of Rails web Applications
 
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
 
Webhooks with Azure Functions - Live 360 Conference
Webhooks with Azure Functions - Live 360 ConferenceWebhooks with Azure Functions - Live 360 Conference
Webhooks with Azure Functions - Live 360 Conference
 
DevOps and Performance - Why, How and Best Practices - DevOps Meetup Sydney
DevOps and Performance - Why, How and Best Practices - DevOps Meetup SydneyDevOps and Performance - Why, How and Best Practices - DevOps Meetup Sydney
DevOps and Performance - Why, How and Best Practices - DevOps Meetup Sydney
 
DevOps: Getting Started with Puppet on Windows
DevOps: Getting Started with Puppet on WindowsDevOps: Getting Started with Puppet on Windows
DevOps: Getting Started with Puppet on Windows
 
OpenStack Israel Summit 2013 - It’s the App, Stupid!
OpenStack Israel Summit 2013 - It’s the App, Stupid! OpenStack Israel Summit 2013 - It’s the App, Stupid!
OpenStack Israel Summit 2013 - It’s the App, Stupid!
 
Using Axe to Add Accessibility Checks to Your Existing Selenium Tests
Using Axe to Add Accessibility Checks to Your Existing Selenium TestsUsing Axe to Add Accessibility Checks to Your Existing Selenium Tests
Using Axe to Add Accessibility Checks to Your Existing Selenium Tests
 
The Importance of Culture: Building and Sustaining Effective Engineering Org...
The Importance of Culture:  Building and Sustaining Effective Engineering Org...The Importance of Culture:  Building and Sustaining Effective Engineering Org...
The Importance of Culture: Building and Sustaining Effective Engineering Org...
 
Pragmatic Continuous Delivery - ReaktorDevDay 2012
Pragmatic Continuous Delivery - ReaktorDevDay 2012Pragmatic Continuous Delivery - ReaktorDevDay 2012
Pragmatic Continuous Delivery - ReaktorDevDay 2012
 
[Christopher Ngo] Intro DevOPS XP Day 2015
[Christopher Ngo] Intro DevOPS XP Day 2015[Christopher Ngo] Intro DevOPS XP Day 2015
[Christopher Ngo] Intro DevOPS XP Day 2015
 
Automated Acceptance Testing from Scratch
Automated Acceptance Testing from ScratchAutomated Acceptance Testing from Scratch
Automated Acceptance Testing from Scratch
 
Webinar: A Sneak Peek at Selenium 4 with Simon Stewart
Webinar: A Sneak Peek at Selenium 4 with Simon StewartWebinar: A Sneak Peek at Selenium 4 with Simon Stewart
Webinar: A Sneak Peek at Selenium 4 with Simon Stewart
 
Evoloution of Ideas
Evoloution of IdeasEvoloution of Ideas
Evoloution of Ideas
 
The DevOps Journey at bwin.party
The DevOps Journey at bwin.partyThe DevOps Journey at bwin.party
The DevOps Journey at bwin.party
 
Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126Seven Jobs You Should Be Running #sqlsat126
Seven Jobs You Should Be Running #sqlsat126
 
PSU Web 2014: UX and Design Tools That Will Improve Your Productivity
PSU Web 2014: UX and Design Tools That Will Improve Your ProductivityPSU Web 2014: UX and Design Tools That Will Improve Your Productivity
PSU Web 2014: UX and Design Tools That Will Improve Your Productivity
 

Viewers also liked

Seller Specific Strategy Report
Seller Specific Strategy ReportSeller Specific Strategy Report
Seller Specific Strategy Report
Arron Groomes
 
Go back-n protocol
Go back-n protocolGo back-n protocol
Go back-n protocol
STEFFY D
 
Personality Report for ME 2016
Personality Report for ME 2016Personality Report for ME 2016
Personality Report for ME 2016
Michael Edwards
 
StrenghtsFinder
StrenghtsFinderStrenghtsFinder
StrenghtsFinder
Arron Groomes
 
Mexico atractivo turistico
Mexico atractivo turisticoMexico atractivo turistico
Mexico atractivo turistico
Adriana Zavaleta Handa
 
PPB_ScopeofServices
PPB_ScopeofServicesPPB_ScopeofServices
PPB_ScopeofServices
Trey Walker
 
https
httpshttps
https
Joe Felber
 
SWISS BULLION
SWISS BULLIONSWISS BULLION
SWISS BULLION
Yesh Lazarte
 
Résumé of sivakumar dravidamani
Résumé of sivakumar dravidamaniRésumé of sivakumar dravidamani
Résumé of sivakumar dravidamani
Sivakumar Dravidamani
 
An eoq model with stock dependent demand
An eoq model with stock dependent demandAn eoq model with stock dependent demand
An eoq model with stock dependent demand
Divyesh Solanki
 
StresStimulus Load Testing Tool User Guide
StresStimulus Load Testing Tool User GuideStresStimulus Load Testing Tool User Guide
StresStimulus Load Testing Tool User Guide
stresstimulus
 
VCPL Presentation
VCPL PresentationVCPL Presentation
VCPL Presentation
suraj wasu
 
Nahha Annual report2015
Nahha Annual report2015Nahha Annual report2015
Nahha Annual report2015
iHawaiidigital
 
Chapter 4 & 5 Notes
Chapter 4 & 5 NotesChapter 4 & 5 Notes
Chapter 4 & 5 Notes
bethanyroisland
 

Viewers also liked (14)

Seller Specific Strategy Report
Seller Specific Strategy ReportSeller Specific Strategy Report
Seller Specific Strategy Report
 
Go back-n protocol
Go back-n protocolGo back-n protocol
Go back-n protocol
 
Personality Report for ME 2016
Personality Report for ME 2016Personality Report for ME 2016
Personality Report for ME 2016
 
StrenghtsFinder
StrenghtsFinderStrenghtsFinder
StrenghtsFinder
 
Mexico atractivo turistico
Mexico atractivo turisticoMexico atractivo turistico
Mexico atractivo turistico
 
PPB_ScopeofServices
PPB_ScopeofServicesPPB_ScopeofServices
PPB_ScopeofServices
 
https
httpshttps
https
 
SWISS BULLION
SWISS BULLIONSWISS BULLION
SWISS BULLION
 
Résumé of sivakumar dravidamani
Résumé of sivakumar dravidamaniRésumé of sivakumar dravidamani
Résumé of sivakumar dravidamani
 
An eoq model with stock dependent demand
An eoq model with stock dependent demandAn eoq model with stock dependent demand
An eoq model with stock dependent demand
 
StresStimulus Load Testing Tool User Guide
StresStimulus Load Testing Tool User GuideStresStimulus Load Testing Tool User Guide
StresStimulus Load Testing Tool User Guide
 
VCPL Presentation
VCPL PresentationVCPL Presentation
VCPL Presentation
 
Nahha Annual report2015
Nahha Annual report2015Nahha Annual report2015
Nahha Annual report2015
 
Chapter 4 & 5 Notes
Chapter 4 & 5 NotesChapter 4 & 5 Notes
Chapter 4 & 5 Notes
 

Similar to React, London JS Meetup, 11 Aug 2015

SGCE 2015 REST APIs
SGCE 2015 REST APIsSGCE 2015 REST APIs
SGCE 2015 REST APIs
Domingo Suarez Torres
 
APIs distribuidos con alta escalabilidad
APIs distribuidos con alta escalabilidadAPIs distribuidos con alta escalabilidad
APIs distribuidos con alta escalabilidad
Software Guru
 
Dev ops lessons learned - Michael Collins
Dev ops lessons learned  - Michael CollinsDev ops lessons learned  - Michael Collins
Dev ops lessons learned - Michael Collins
Devopsdays
 
How to write bad code using C#
How to write bad code using C#How to write bad code using C#
How to write bad code using C#
Wekoslav Stefanovski
 
Why Plone Will Die
Why Plone Will DieWhy Plone Will Die
Why Plone Will Die
Andreas Jung
 
Going Reactive in the Land of No
Going Reactive in the Land of NoGoing Reactive in the Land of No
Going Reactive in the Land of No
Lightbend
 
DevOps and Microservice
DevOps and MicroserviceDevOps and Microservice
DevOps and Microservice
Inho Kang
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
Derek Jacoby
 
Play Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewPlay Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level Overview
Josh Padnick
 
Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)
Hsuan Fu Lien
 
From hello world to goodbye code
From hello world to goodbye codeFrom hello world to goodbye code
From hello world to goodbye code
Kim Moir
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
Paul van Zyl
 
Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...
Balanced Team
 
ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017
vinaikopp
 
State of Puppet - Puppet Camp Silicon Valley 2014
State of Puppet - Puppet Camp Silicon Valley 2014State of Puppet - Puppet Camp Silicon Valley 2014
State of Puppet - Puppet Camp Silicon Valley 2014
Puppet
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
Chenguang ZHANG
 
REST vs. GraphQL: Critical Look
REST vs. GraphQL: Critical LookREST vs. GraphQL: Critical Look
REST vs. GraphQL: Critical Look
Nordic APIs
 
Portable infrastructure with puppet
Portable infrastructure with puppetPortable infrastructure with puppet
Portable infrastructure with puppet
lkanies
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 

Similar to React, London JS Meetup, 11 Aug 2015 (20)

SGCE 2015 REST APIs
SGCE 2015 REST APIsSGCE 2015 REST APIs
SGCE 2015 REST APIs
 
APIs distribuidos con alta escalabilidad
APIs distribuidos con alta escalabilidadAPIs distribuidos con alta escalabilidad
APIs distribuidos con alta escalabilidad
 
Dev ops lessons learned - Michael Collins
Dev ops lessons learned  - Michael CollinsDev ops lessons learned  - Michael Collins
Dev ops lessons learned - Michael Collins
 
How to write bad code using C#
How to write bad code using C#How to write bad code using C#
How to write bad code using C#
 
Why Plone Will Die
Why Plone Will DieWhy Plone Will Die
Why Plone Will Die
 
Going Reactive in the Land of No
Going Reactive in the Land of NoGoing Reactive in the Land of No
Going Reactive in the Land of No
 
DevOps and Microservice
DevOps and MicroserviceDevOps and Microservice
DevOps and Microservice
 
Untangling spring week1
Untangling spring week1Untangling spring week1
Untangling spring week1
 
Play Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level OverviewPlay Framework: Intro & High-Level Overview
Play Framework: Intro & High-Level Overview
 
Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)
 
From hello world to goodbye code
From hello world to goodbye codeFrom hello world to goodbye code
From hello world to goodbye code
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
 
Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...Lean engineering for lean/balanced teams: lessons learned (and still learning...
Lean engineering for lean/balanced teams: lessons learned (and still learning...
 
ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017ClojureScript in Magento 2 - MageTitansMCR 2017
ClojureScript in Magento 2 - MageTitansMCR 2017
 
State of Puppet - Puppet Camp Silicon Valley 2014
State of Puppet - Puppet Camp Silicon Valley 2014State of Puppet - Puppet Camp Silicon Valley 2014
State of Puppet - Puppet Camp Silicon Valley 2014
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
 
REST vs. GraphQL: Critical Look
REST vs. GraphQL: Critical LookREST vs. GraphQL: Critical Look
REST vs. GraphQL: Critical Look
 
Portable infrastructure with puppet
Portable infrastructure with puppetPortable infrastructure with puppet
Portable infrastructure with puppet
 
Rapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
 

Recently uploaded

Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Neo4j
 
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
Alina Yurenko
 
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
kalichargn70th171
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptxLORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
lorraineandreiamcidl
 
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppAI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
Google
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
What is Augmented Reality Image Tracking
What is Augmented Reality Image TrackingWhat is Augmented Reality Image Tracking
What is Augmented Reality Image Tracking
pavan998932
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
E-commerce Application Development Company.pdf
E-commerce Application Development Company.pdfE-commerce Application Development Company.pdf
E-commerce Application Development Company.pdf
Hornet Dynamics
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
Aftab Hussain
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
Deuglo Infosystem Pvt Ltd
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
Sven Peters
 
DDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systemsDDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systems
Gerardo Pardo-Castellote
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
NYGGS Automation Suite
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
lorraineandreiamcidl
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Undress Baby
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 

Recently uploaded (20)

Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
 
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)GOING AOT WITH GRAALVM FOR  SPRING BOOT (SPRING IO)
GOING AOT WITH GRAALVM FOR SPRING BOOT (SPRING IO)
 
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
Why Mobile App Regression Testing is Critical for Sustained Success_ A Detail...
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptxLORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
 
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppAI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
What is Augmented Reality Image Tracking
What is Augmented Reality Image TrackingWhat is Augmented Reality Image Tracking
What is Augmented Reality Image Tracking
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
E-commerce Application Development Company.pdf
E-commerce Application Development Company.pdfE-commerce Application Development Company.pdf
E-commerce Application Development Company.pdf
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
 
DDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systemsDDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systems
 
Enterprise Resource Planning System in Telangana
Enterprise Resource Planning System in TelanganaEnterprise Resource Planning System in Telangana
Enterprise Resource Planning System in Telangana
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 

React, London JS Meetup, 11 Aug 2015

  • 1. React a revolution in Web UI technology @redbadgerteam
  • 2. “strong opinions,
 which are weakly held” Paul Saffo, Director of Palo Alto’s Institute for the Future
  • 3. Give it 5 minutes • He said “Man, give it five minutes.” I asked him what he meant by that? He said, it’s fine to disagree, it’s fine to push back, it’s great to have strong opinions and beliefs, but give my ideas some time to set in before you’re sure you want to argue against them. • https://signalvnoise.com/posts/3124-give-it-five- minutes
  • 4. Stuart Harris CIO, Founder Red Badger @stuartharris
  • 6. Give it 5 minutes
  • 8. Virtual DOM • The DOM is slow, has an imperative API and State • A COMPONENT should be fast, declarative, stateless • “Shared mutable state changing over time is the root of all evil” • A virtual DOM allows you to declare your UI • The UI becomes a projection of your model • Conceptually re-rendered on EVERY change
  • 9.
  • 10. f(d) = v f(d’) = v’ diff(v, v’) => changes diff(v’, v) => undo
  • 11. WOW • This completely changes the way I think about my application • Very much like immediate mode games rendering • Declarative • Delegated event model
  • 12. DEMO
  • 13. What about MVC? • Incorrect separation of concerns • Is React the “V” in MVC? • “Components” is a better SoC • What about Web Components? (polymer etc)
  • 14. Peter Hunt (Code Winds Podcast) “There is a lot of stuff you get for free when you build like the browser doesn’t exist and this is one thing that distinguishes React from Web Components and Polymer and that kind of thing …they’re getting closer and closer in with the browser, and we’re getting farther and farther from the browser. And I think that our technique is more sustainable in the long term.”
  • 15. Render to any surface • react-native • react-art • react-canvas • react-three • Netflix TV • React 0.14 • npm install react@0.14.0-beta1 • npm install react-dom@0.14.0-beta1
  • 16. –The Facebook React team “Learn once, write anywhere”
  • 17. But it’s only the “View” • Flux • Relay and GraphQL • Om and Om.next • Redux • Arch
  • 20. Functional? • Pure render function • shouldComponentUpdate • Immutable data (immutable.js, mori) • Stateless components • Centralised application state
  • 21. Tooling • Nuclide • Jest • Atom, Babel (JSX) • Flow • React Dev Tools for Chrome and Firefox
  • 22. DEMO
  • 23. So where is all this going? • Towards more semantic UI declarations • Separation of UI definition from rendering (0.14) • Multiplatform - learn once write everywhere • More functional
  • 24. Stuart Harris CIO, Founder Red Badger @stuartharris