Its time to React.js

Its time to React.js

• 1.
  Noorul Ameen Its timeto 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 isdeclarative, 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
• 4.
  Without React.js Hello World! ©TechTalks, 2017
• 5.
  What browser doesbehind the scenes JS HTML CSS DOM (Tree) Render Tree Web Page Style Rules © TechTalks, 2017
• 6.
   DOM andJavaScript 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 HelloWorld! © TechTalks, 2017
• 8.
  Behind the scene JS HTML CSS DOM (Tree) Render Tree Web Page Style Rules React Components Virtual DOM ©TechTalks, 2017
• 9.
  Virtual DOM Comparison DOM (Tree) React Components (InitialLoad) Virtual DOM Version 1 DOM (Tree) React Components (Page Updates) Virtual DOM Version 2 Diff of V1 & V2 © TechTalks, 2017
• 10.
   Build ReusableComponents (Not templates)  Reactive Updates (React auto updates UI when data changes.)  Performance (Virtual DOM)  Testability Why React? © TechTalks, 2017
• 11.
  Reduce Coupling andIncrease 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 Componentsfollows “Reduce Coupling, increase Cohesion”.  React Components encapsulates  Data  View  Logic  Component can contain other child components. React Components © TechTalks, 2017
• 13.
   When datachanges, 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 createsVirtual 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 forcesus to build everything as components.  Components are easy to unit test Testability © TechTalks, 2017
• 16.
   https://github.com/jnoorul/tech-talk-stock-viewer Live Coding– Stock Price Viewer © TechTalks, 2017
• 17.
  Way forward –React Native (Cross Platform Mobile Apps) © TechTalks, 2017
• 18.
   React officialsite 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
• 19.
  THANK YOU © TechTalks,2017