SlideShare a Scribd company logo
Noorul Ameen
Its time to React.js
© TechTalks, 2017
 Hello World
 React fundamentals – What is happening behind the scenes
 Live Coding – Building “Stock Price Viewer”
 Q & A
Agenda
© TechTalks, 2017
 React is declarative, efficient and flexible JavaScript library for building user interfaces.
 React was created by Jordan Walke from Facebook. Originally used in newsfeed and
then in Instagram.com
 Open Sourced in May 2013.
 Highest number of stars(57,773) in “Github Front-end JavaScript
frameworks” followed by Angular.
 Some of the big names using react are NETFLIX, PAYPAL, AIRBNB, UBER, KHAN
ACADEMY…. (Source libscore.com)
React Intro
© TechTalks, 2017
Without React.js
Hello World!
© TechTalks, 2017
What browser does behind the scenes
JS
HTML
CSS
DOM
(Tree)
Render
Tree
Web Page
Style
Rules
© TechTalks, 2017
 DOM and JavaScript are different
 Accessing DOM from JavaScript is slow
 Too many DOM updates may slow down your app
Things to note
© TechTalks, 2017
The React.js way
Hello World!
© TechTalks, 2017
Behind the scene
JS
HTML
CSS
DOM
(Tree)
Render
Tree
Web
Page
Style
Rules
React
Components
Virtual
DOM
© TechTalks, 2017
Virtual DOM Comparison
DOM
(Tree)
React
Components
(Initial Load)
Virtual
DOM
Version 1
DOM
(Tree)
React
Components
(Page Updates)
Virtual
DOM
Version 2
Diff of
V1 & V2
© TechTalks, 2017
 Build Reusable Components (Not templates)
 Reactive Updates (React auto updates UI when data changes.)
 Performance (Virtual DOM)
 Testability
Why React?
© TechTalks, 2017
Reduce Coupling and Increase Cohesion
 Coupling:
Coupling is the degree of interdependence between software
modules.
 Cohesion:
Cohesion refers to the degree to which the elements of
a module belong together. Thus, cohesion measures the strength
of relationship between pieces of functionality within a given
module.
Build Reusable Components, Not templates
© TechTalks, 2017
 React Components follows
“Reduce Coupling, increase Cohesion”.
 React Components encapsulates
 Data
 View
 Logic
 Component can contain other
child components.
React Components
© TechTalks, 2017
 When data changes, react auto updates UI in the most efficient and
performant way.
 React supports one way data flow instead of two way binding.
 When state changes, react re-renders the component. Also does a diff of
current render with previous render and applies only the minimal set of
changes to actual DOM.
Reactive Updates
© TechTalks, 2017
 React creates Virtual DOM by rendering component and it is children.
 It is a JavaScript object unlike real DOM.
 Working with VDOM is faster than actual DOM
 React patches the updates from VDOM to real DOM.
Virtual DOM
© TechTalks, 2017
 React forces us to build everything as components.
 Components are easy to unit test
Testability
© TechTalks, 2017
 https://github.com/jnoorul/tech-talk-stock-viewer
Live Coding – Stock Price Viewer
© TechTalks, 2017
Way forward – React Native (Cross Platform Mobile
Apps)
© TechTalks, 2017
 React official site https://facebook.github.io/react/
 Why React? https://facebook.github.io/react/blog/2013/06/05/why-react.html
 NETFLIX- Crafting a high performance TV user interface using React
http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html
 Source Code https://github.com/jnoorul/tech-talk-stock-viewer
For further info
© TechTalks, 2017
THANK YOU
© TechTalks, 2017
Ad

More Related Content

What's hot (20)

Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Knoldus Inc.
 
React js
React jsReact js
React js
Rajesh Kolla
 
Reactjs
Reactjs Reactjs
Reactjs
Neha Sharma
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Intro to React
Intro to ReactIntro to React
Intro to React
Eric Westfall
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf
 
React js
React jsReact js
React js
Oswald Campesato
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
Sergey Romaneko
 
Basics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfBasics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdf
Knoldus Inc.
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
ReactJs
ReactJsReactJs
ReactJs
Sahana Banerjee
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
Soluto
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
Rob Quick
 
React workshop
React workshopReact workshop
React workshop
Imran Sayed
 
Intro to React
Intro to ReactIntro to React
Intro to React
Justin Reock
 
React state
React  stateReact  state
React state
Ducat
 
ReactJS
ReactJSReactJS
ReactJS
Hiten Pratap Singh
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
DivyanshGupta922023
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
Bethmi Gunasekara
 

Similar to Its time to React.js (20)

Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdf
BOSC Tech Labs
 
How Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdfHow Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdf
Techugo
 
How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.
Techugo
 
Vue Js vs React: Which is the Best JS Technology in 2023
Vue Js vs React: Which is the Best JS Technology in 2023Vue Js vs React: Which is the Best JS Technology in 2023
Vue Js vs React: Which is the Best JS Technology in 2023
Aman Mishra
 
React js vs react native a comparative analysis
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysis
Shelly Megan
 
Review on React JS
Review on React JSReview on React JS
Review on React JS
ijtsrd
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
75waytechnologies
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav
 
Front End Development
Front End DevelopmentFront End Development
Front End Development
EahaRani
 
ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
ReactJS Vs React Native: Understanding Differences, Advantages, DisadvantagesReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
Techtic Solutions
 
Best 10 Advantages Of React.js Development For Your Business
Best 10 Advantages Of React.js Development For Your BusinessBest 10 Advantages Of React.js Development For Your Business
Best 10 Advantages Of React.js Development For Your Business
Agile Infoways LLC
 
Boost Startup Success: Hire Skilled ReactJS Developers Today
Boost Startup Success: Hire Skilled ReactJS Developers TodayBoost Startup Success: Hire Skilled ReactJS Developers Today
Boost Startup Success: Hire Skilled ReactJS Developers Today
BOSC Tech Labs
 
React vs React Native
React vs React NativeReact vs React Native
React vs React Native
Albiorix Technology
 
why_choose_react_js_development_for_building_websites_in_2023.pdf
why_choose_react_js_development_for_building_websites_in_2023.pdfwhy_choose_react_js_development_for_building_websites_in_2023.pdf
why_choose_react_js_development_for_building_websites_in_2023.pdf
sarah david
 
What are the business benefits of ReactJS for web and mobile applications_.pdf
What are the business benefits of ReactJS for web and mobile applications_.pdfWhat are the business benefits of ReactJS for web and mobile applications_.pdf
What are the business benefits of ReactJS for web and mobile applications_.pdf
ReactJS
 
What is ReactJS?
What is ReactJS?What is ReactJS?
What is ReactJS?
Albiorix Technology
 
React Vs Vue.js Which One is Better.pdf
React Vs Vue.js Which One is Better.pdfReact Vs Vue.js Which One is Better.pdf
React Vs Vue.js Which One is Better.pdf
Laura Miller
 
Web Development.pdf
Web Development.pdfWeb Development.pdf
Web Development.pdf
MuhammadAbdullah719451
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon
 
Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdf
BOSC Tech Labs
 
How Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdfHow Can the Hermes Engine Help React Native Apps.docx.pdf
How Can the Hermes Engine Help React Native Apps.docx.pdf
Techugo
 
How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.How Can the Hermes Engine Help React Native Apps.
How Can the Hermes Engine Help React Native Apps.
Techugo
 
Vue Js vs React: Which is the Best JS Technology in 2023
Vue Js vs React: Which is the Best JS Technology in 2023Vue Js vs React: Which is the Best JS Technology in 2023
Vue Js vs React: Which is the Best JS Technology in 2023
Aman Mishra
 
React js vs react native a comparative analysis
React js vs react native a comparative analysisReact js vs react native a comparative analysis
React js vs react native a comparative analysis
Shelly Megan
 
Review on React JS
Review on React JSReview on React JS
Review on React JS
ijtsrd
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
75waytechnologies
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav
 
Front End Development
Front End DevelopmentFront End Development
Front End Development
EahaRani
 
ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
ReactJS Vs React Native: Understanding Differences, Advantages, DisadvantagesReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages
Techtic Solutions
 
Best 10 Advantages Of React.js Development For Your Business
Best 10 Advantages Of React.js Development For Your BusinessBest 10 Advantages Of React.js Development For Your Business
Best 10 Advantages Of React.js Development For Your Business
Agile Infoways LLC
 
Boost Startup Success: Hire Skilled ReactJS Developers Today
Boost Startup Success: Hire Skilled ReactJS Developers TodayBoost Startup Success: Hire Skilled ReactJS Developers Today
Boost Startup Success: Hire Skilled ReactJS Developers Today
BOSC Tech Labs
 
why_choose_react_js_development_for_building_websites_in_2023.pdf
why_choose_react_js_development_for_building_websites_in_2023.pdfwhy_choose_react_js_development_for_building_websites_in_2023.pdf
why_choose_react_js_development_for_building_websites_in_2023.pdf
sarah david
 
What are the business benefits of ReactJS for web and mobile applications_.pdf
What are the business benefits of ReactJS for web and mobile applications_.pdfWhat are the business benefits of ReactJS for web and mobile applications_.pdf
What are the business benefits of ReactJS for web and mobile applications_.pdf
ReactJS
 
React Vs Vue.js Which One is Better.pdf
React Vs Vue.js Which One is Better.pdfReact Vs Vue.js Which One is Better.pdf
React Vs Vue.js Which One is Better.pdf
Laura Miller
 
React vs. angular a comprehensive guideline for choosing right front-end fr...
React vs. angular   a comprehensive guideline for choosing right front-end fr...React vs. angular   a comprehensive guideline for choosing right front-end fr...
React vs. angular a comprehensive guideline for choosing right front-end fr...
Katy Slemon
 
Ad

More from Ritesh Mehrotra (6)

Unit Testing and role of Test doubles
Unit Testing and role of Test doublesUnit Testing and role of Test doubles
Unit Testing and role of Test doubles
Ritesh Mehrotra
 
Progressive Web Applications - A gentle introduction
Progressive Web Applications - A gentle introductionProgressive Web Applications - A gentle introduction
Progressive Web Applications - A gentle introduction
Ritesh Mehrotra
 
A journey from Vision to product
A journey from Vision to productA journey from Vision to product
A journey from Vision to product
Ritesh Mehrotra
 
Behavior driven development
Behavior driven developmentBehavior driven development
Behavior driven development
Ritesh Mehrotra
 
Elaborating Scrum Values
Elaborating Scrum ValuesElaborating Scrum Values
Elaborating Scrum Values
Ritesh Mehrotra
 
The curious case of Blockchain Technology
The curious case of Blockchain TechnologyThe curious case of Blockchain Technology
The curious case of Blockchain Technology
Ritesh Mehrotra
 
Unit Testing and role of Test doubles
Unit Testing and role of Test doublesUnit Testing and role of Test doubles
Unit Testing and role of Test doubles
Ritesh Mehrotra
 
Progressive Web Applications - A gentle introduction
Progressive Web Applications - A gentle introductionProgressive Web Applications - A gentle introduction
Progressive Web Applications - A gentle introduction
Ritesh Mehrotra
 
A journey from Vision to product
A journey from Vision to productA journey from Vision to product
A journey from Vision to product
Ritesh Mehrotra
 
Behavior driven development
Behavior driven developmentBehavior driven development
Behavior driven development
Ritesh Mehrotra
 
Elaborating Scrum Values
Elaborating Scrum ValuesElaborating Scrum Values
Elaborating Scrum Values
Ritesh Mehrotra
 
The curious case of Blockchain Technology
The curious case of Blockchain TechnologyThe curious case of Blockchain Technology
The curious case of Blockchain Technology
Ritesh Mehrotra
 
Ad

Recently uploaded (20)

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingRole of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered Manufacturing
Andrew Leo
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
tecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdftecnologias de las primeras civilizaciones.pdf
tecnologias de las primeras civilizaciones.pdf
fjgm517
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In FranceManifest Pre-Seed Update | A Humanoid OEM Deeptech In France
Manifest Pre-Seed Update | A Humanoid OEM Deeptech In France
chb3
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...
Alan Dix
 
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionHeap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and Deletion
Jaydeep Kale
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 

Its time to React.js

  • 1. Noorul Ameen Its time to React.js © TechTalks, 2017
  • 2.  Hello World  React fundamentals – What is happening behind the scenes  Live Coding – Building “Stock Price Viewer”  Q & A Agenda © TechTalks, 2017
  • 3.  React is declarative, efficient and flexible JavaScript library for building user interfaces.  React was created by Jordan Walke from Facebook. Originally used in newsfeed and then in Instagram.com  Open Sourced in May 2013.  Highest number of stars(57,773) in “Github Front-end JavaScript frameworks” followed by Angular.  Some of the big names using react are NETFLIX, PAYPAL, AIRBNB, UBER, KHAN ACADEMY…. (Source libscore.com) React Intro © TechTalks, 2017
  • 5. What browser does behind the scenes JS HTML CSS DOM (Tree) Render Tree Web Page Style Rules © TechTalks, 2017
  • 6.  DOM and JavaScript are different  Accessing DOM from JavaScript is slow  Too many DOM updates may slow down your app Things to note © TechTalks, 2017
  • 7. The React.js way Hello World! © TechTalks, 2017
  • 9. Virtual DOM Comparison DOM (Tree) React Components (Initial Load) Virtual DOM Version 1 DOM (Tree) React Components (Page Updates) Virtual DOM Version 2 Diff of V1 & V2 © TechTalks, 2017
  • 10.  Build Reusable Components (Not templates)  Reactive Updates (React auto updates UI when data changes.)  Performance (Virtual DOM)  Testability Why React? © TechTalks, 2017
  • 11. Reduce Coupling and Increase Cohesion  Coupling: Coupling is the degree of interdependence between software modules.  Cohesion: Cohesion refers to the degree to which the elements of a module belong together. Thus, cohesion measures the strength of relationship between pieces of functionality within a given module. Build Reusable Components, Not templates © TechTalks, 2017
  • 12.  React Components follows “Reduce Coupling, increase Cohesion”.  React Components encapsulates  Data  View  Logic  Component can contain other child components. React Components © TechTalks, 2017
  • 13.  When data changes, react auto updates UI in the most efficient and performant way.  React supports one way data flow instead of two way binding.  When state changes, react re-renders the component. Also does a diff of current render with previous render and applies only the minimal set of changes to actual DOM. Reactive Updates © TechTalks, 2017
  • 14.  React creates Virtual DOM by rendering component and it is children.  It is a JavaScript object unlike real DOM.  Working with VDOM is faster than actual DOM  React patches the updates from VDOM to real DOM. Virtual DOM © TechTalks, 2017
  • 15.  React forces us to build everything as components.  Components are easy to unit test Testability © TechTalks, 2017
  • 17. Way forward – React Native (Cross Platform Mobile Apps) © TechTalks, 2017
  • 18.  React official site https://facebook.github.io/react/  Why React? https://facebook.github.io/react/blog/2013/06/05/why-react.html  NETFLIX- Crafting a high performance TV user interface using React http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html  Source Code https://github.com/jnoorul/tech-talk-stock-viewer For further info © TechTalks, 2017