the greatest v in mvc reactjs · react so what’s the deal? react is a huge departure from...
TRANSCRIPT
![Page 2: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/2.jpg)
REACT
DISPOSITION
▸ What makes React different?
▸ How it works
▸ Some code
▸ Avtaleverktøy
▸ How to use it well.
▸ Future
![Page 3: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/3.jpg)
REACT
WHO ARE YOU?
▸ Aspiring JavaScript programmers?
▸ And excellent students
▸ In any case
▸ Some JavaScript knowledge is good but not necessary
▸ Majority of criticism here addresses issues in JavaScript
![Page 4: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/4.jpg)
REACT
WHAT IS REACT?
▸ React is a Javascript framework based on JS6
▸ It’s main focus is to provide a more sane way to code in the browser
▸ Plain HTML / JS is a challenge
▸ Standards over 25 years has made HTML disparate
▸ Trying to build complex apps in JavaScript (with jQuery) leads to spaghetti-code.
![Page 5: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/5.jpg)
WHAT MAKES IT DIFFERENT
![Page 6: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/6.jpg)
REACT
WHAT IS REACT
▸ First off, React is only a View framework.
▸ It does not do networking, models, layout, protocols, or any of that
▸ This keeps React simple and small in comparison with many other frameworks
▸ Makes it easy to learn, and excellent
![Page 7: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/7.jpg)
"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is
Nothing Left to Take Away"
Antoine de Saint-Exupéry
![Page 8: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/8.jpg)
REACT
WHO USES IT
▸ React is one of the most popular frameworks in recent years
![Page 9: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/9.jpg)
REACT
SO WHAT’S THE DEAL?
▸ React is a huge departure from traditional JS
▸ React has a very strong focus on components
▸ If you have programmed .NET / Java the last 15 years you know about these things called classes. But they’re pretty new for the web.
▸ React makes the web more like the Desktop / Native
![Page 10: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/10.jpg)
REACT
MORE LIKE THE DESKTOP
▸ Turns out, classes are pretty great!
▸ Encapsulated functionality
▸ Define your classes with methods.
▸ Methods are called when lifetime events happen
▸ Other methods are event handlers
![Page 11: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/11.jpg)
HOW TO USE REACTTHE SHORT VERSION
![Page 12: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/12.jpg)
REACT
FIRST YOU NEED THE ENVIRONMENT
▸ Can’t do React directly in the browser
▸ Easiest setup is via npm
▸ $ npm install -g yo bower grunt-cli gulp
▸ $ npm install -g generator-react-webpack
▸ $ yo
▸ $ npm start OR SOMETHING LIKE IT
![Page 13: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/13.jpg)
REACT
THE HTML
<body>
<div id="react">
<!-- React goes here -->
</div>
<script …>
</body>
![Page 14: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/14.jpg)
REACT
THE HTML
<body>
<div id="react">
<!-- React goes here -->
</div>
<script …>
</body>
EVERYTHING IS DONE IN JS
(You can mount anywhere)
![Page 15: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/15.jpg)
REACT
THE SIMPLEST COMPONENT
import React from ‘react’;
class MessageBox extends React.Component {
render: function() { return ( <div className="messageBox"> Hello, world! I am a MessageBox. </div> ); }
}
export default MessageBox;
![Page 16: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/16.jpg)
REACT
THE SIMPLEST COMPONENT
import React from ‘react’;
class MessageBox extends React.Component {
render: function() { return ( <div className="messageBox"> Hello, world! I am a MessageBox. </div> ); }
}
export default MessageBox;
JS6 CLASSES (YOU CAN USE REACT WITHOUT
THEM)
![Page 17: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/17.jpg)
REACT
THE SIMPLEST COMPONENT
import React from ‘react’;
class MessageBox extends React.Component {
render: function() { return ( <div className="messageBox"> Hello, world! I am a MessageBox. </div> ); }
}
export default MessageBox;
WE WRITE OUR HTML INLINE
![Page 18: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/18.jpg)
REACT
THE SIMPLEST COMPONENT
import React from ‘react’;
class MessageBox extends React.Component {
render: function() { return ( <div className="messageBox"> Hello, world! I am a MessageBox. </div> ); }
}
export default MessageBox;
RENDER IS THE MAGIC OF REACT
![Page 19: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/19.jpg)
REACT
JSX TRANSFORMATION
<div className="commentBox"> Hello, world! I am a CommentBox. </div>
React.createElement(“div”, { className: “commentBox” }, “Hello world! I am a CommentBox” )
![Page 20: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/20.jpg)
REACT
JSX TRANSFORMATION
▸ Makes it easier to write.
▸ Easier to match <div></div> than {}.
▸ Make it much easier to read larger structures.
▸ And also, it looks like HTML!
▸ But it is not HTML
![Page 21: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/21.jpg)
REACT
THE VIRTUAL DOM
▸ The render method only returns a javascript object, no DOM elements are ever created during render.
▸ React then compares the rendered object to the actual DOM, and only performs the changes necessary to update the DOM as efficiently as possible.
![Page 22: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/22.jpg)
REACT
COMPOSITION
import React from ‘react’;
class MessageBox extends React.Component {
render: function() { return ( <div className="messageBox"> Hello, world! I am a MessageBox. </div> ); }
}
export default MessageBox;
![Page 23: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/23.jpg)
REACT
COMPOSITION
import React from ‘react’; import MessageBox from ‘./MessageBox.js’;
class App extends React.Component {
render: function() { return ( <MessageBox /> ); }
}
export default App;
![Page 24: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/24.jpg)
REACT
HOW DOES THE VIRTUAL DOM WORK?
▸ Your code does not interact with the DOM directly
▸ Instead it creates ‘virtual DOM’, and translates back & forth between this and the real one.
![Page 25: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/25.jpg)
REACT
HOW REACT UPDATES THE DOM
![Page 26: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/26.jpg)
REACT
THIS THING CALLED STATEclass MessageBox extends React.Component { constructor () { this.state = { to: "Computas"
}; }
render: function() { return ( <div className="messageBox"> Hello, {this.state.to}>! I am a MessageBox. </div> ); }
}
export default MessageBox;
![Page 27: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/27.jpg)
REACT
CHANGING STATEclass MessageBox extends React.Component { constructor () { … }
handleClick: function() { this.setState({ to: ’World’ });
}
render: function() { return ( <button className=“messageBox" onClick={this.handleClick}> Hello, {this.state.to}! Click to change greeting. </button> ); }
}
export default MessageBox;
![Page 28: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/28.jpg)
REACT
HOW REACT UPDATES THE DOM
![Page 29: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/29.jpg)
REACT
THE VIRTUAL DOM
▸ The render method only returns a hash, no DOM elements are ever created during render.
▸ React then compares the rendered hash to the actual DOM, and only performs the changes necessary to update the DOM as efficiently as possible.
▸ But in practice, you can imagine in recreates everything all the time, because that is the observable effect.
![Page 30: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/30.jpg)
▸ Creating and removing actual DOM nodes is slow
▸ Comparing in-memory hashes is fast
▸ Speed is one of the main motivations for Facebook
REACT
FOCUS ON SPEED
![Page 31: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/31.jpg)
REACT
DONT WORRY ABOUT STATE!
▸ State is a mess
▸ Remember all that Java/Swing/C#/WPF/C++/WX/MFC code to figure out:
▸ If you need to update a text field?
▸ Or what happens when you change the selected item
▸ Or what happens when you move the cursor?
![Page 32: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/32.jpg)
REACT
DONT WORRY ABOUT STATE!
▸ State is a mess
▸ Remember all that Java/Swing/C#/WPF/C++/WX/MFC code to figure out:
▸ If you need to update a text field?
▸ Or what happens when you change the selected item
▸ Or what happens when you move the cursor?
NO WORRIES!
In React, you don’t need to think about that shit (unless you want
animations)
![Page 33: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/33.jpg)
REACT
STATE
▸ All components have state
▸ This is the mutable part of that component.
▸ Examples:
▸ Focus
▸ Drag state
▸ Menu open?
PROPS
▸ Props (properties) are passed down from the parent
▸ The value of a field
▸ Examples:
▸ The value of a field
▸ The style of a button
▸ Event handlers
![Page 34: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/34.jpg)
REACT
render: function() { return ( <button className=“messageBox” onClick={this.handleClick}> Hello, {this.state.to}! Click to change greeting. </button> ); }
THESE ARE PROPS
![Page 35: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/35.jpg)
REACT
render: function() { return ( <button className=“messageBox” onClick={this.handleClick}> Hello, {this.state.to}! Click to change greeting. </button> ); }
THESE ARE PROPS
(THIS IS A CHILD)
![Page 36: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/36.jpg)
REACT
MAKING A CALCULATOR
▸ We’ll make a very simple calculator app in React
▸ Everyone else makes TODO-lists, not as exciting
▸ Shows how components & ES2016 works in practice
![Page 37: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/37.jpg)
LIVE CODING
![Page 38: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/38.jpg)
</DEMO>
![Page 39: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/39.jpg)
REACT
SUMMED UP
▸ Some of the basics of React
▸ How the dev environment is set up
▸ How you structure your code
▸ How you encapsulate logic
![Page 40: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/40.jpg)
AVTALEVERKTØYFOR BUFDIR
![Page 41: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/41.jpg)
REACT
AVTALEVERKTØY
▸ Entirely a React app
▸ Demonstrates some of the benefits of React
▸ Easy reusability
▸ Easy to express relationships between components
▸ ‘Hacks’ are very compartmentalised
![Page 42: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/42.jpg)
REACT
AVTALEVERKTØY
▸ React is excellent to get details right
▸ Hacks to fix one part does not affect the rest of the app
▸ Soooooo much better than doing classic JS (jQuery et. al.)
![Page 43: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/43.jpg)
HOW TO USE IT WELLTIPS AND TRICKS
![Page 44: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/44.jpg)
REACT
REACT IS NOT A REPLACEMENT FOR THE WEB
▸ Websites should continue being done in plain HTML.
▸ Webapps are a great fit for React
![Page 45: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/45.jpg)
REACT
REACT IS NOT A REPLACEMENT FOR THE WEB
▸ Websites should continue being done in plain HTML.
▸ Webapps are a great fit for React
X
![Page 46: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/46.jpg)
REACT
WRITE-ONLY MAKES THINGS MORE CLEAN
▸ Write-only makes things much more clean
▸ You never do this.showThisDialog();
▸ You check in render() for this.state.isDialogShown, and put it right there to render it.
▸ This means you don’t need to worry about HOW your app got in some state. Just render it as if everything was known always.
![Page 47: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/47.jpg)
REACT
ESCAPING THE VIRTUAL DOM
▸ React is a very simple library, and does not try to do your work for you.
▸ You need to escape to the ‘real’ DOM when you want to do custom behaviour
▸ BUT this behaviour will be entirely encapsulated in that component, and if you do it well, will work no matter what!
![Page 48: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/48.jpg)
REACT
DONT CONFUSE PROPS AND STATE
▸ State is internal to the component only.
▸ Props is what the parent communicates down.
▸ Top components have state (dialogs, pages)
▸ Middleware components don’t need it.
▸ In Foreldreavtale, pretty much ONLY the top component has state, everything else is props.
▸ You will learn this if you don’t know it already
![Page 49: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/49.jpg)
REACT
FASTER THAN NATIVE DOM MANIPULATION
0MS
125MS
250MS
375MS
500MS
REACT ANGULAR KNOCKOUT NATIVE DOM
https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
![Page 50: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/50.jpg)
REACT
FASTER THAN NATIVE DOM MANIPULATION
0MS
125MS
250MS
375MS
500MS
REACT ANGULAR KNOCKOUT NATIVE DOM
OBVIOUSLY SENSATIONALISTIC! BUT DIFFING HASHES IS FASTER THAN REMOVING NODES
https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
![Page 51: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/51.jpg)
REACT
COMPARED TO OTHER LIBRARIES
0
12,5
25
37,5
50
REACT ANGULAR JQUERY
33 KB
50 KB
26 KB
![Page 52: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/52.jpg)
REACT
COMPARED TO OTHER LIBRARIES
0
150
300
450
600
REACT ANGULAR JQUERY KENDO UI / TELERIK
512 KB
33 KB50 KB26 KB
![Page 53: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/53.jpg)
WHATS NEXTFUTURE OF THE WEB
![Page 54: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/54.jpg)
REACT
WHAT’S NEXT
▸ Now we have XAML
▸ Next level is a UI editor
▸ And a good super-framework that includes the application lifetime perspective (Like Qt)
▸ Write-once is an awesome idea
▸ We now have major actors pulling development forward
▸ React Native?
![Page 55: THE GREATEST V IN MVC ReactJS · REACT SO WHAT’S THE DEAL? React is a huge departure from traditional JS React has a very strong focus on components If you have programmed .NET](https://reader033.vdocuments.us/reader033/viewer/2022052720/5f09bebe7e708231d42850cd/html5/thumbnails/55.jpg)
QUESTIONSHJNILSSON.COM/DOWNLOADS/2016-02-03-NTNU.PDF