Paweł Grabarz
About us
Anna Konopka
Hype? Never heard of it.
How many decisions you make per day?
...and how are they influenced by your environment?
What should I do now?
JSX versus templates
<component-a>
<div ng-repeat="item in data">
<component-b>
<span> Templates are great! </span>
</component-b>
</div>
</component-a>Templates
bindings and $digest cycle
Angular 1.x
<ComponentA>
{
data.map(item => (
<ComponentB>
<span>JSX is great!</span>
</ComponentB>
));
}
</ComponentA>JSX
React
virtual DOM diffing
Vue 2.0
<ComponentA boo={1}>
<ComponentB>
<span>I can use JSX</span>
</ComponentB>
</ComponentA><component-a :boo="1">
<component-b>
<span>and templates</span>
</component-b>
</component-a>the same DOM updates mechanism
Great API !== great library
You’re not the only one
Take a closer look
Code review
XSS, anyone?
Community and ecosystem
$ ember new my-project
$ ng new my-project
$ create-react-app my-project
$ create-preact-app my-project
$ vue init webpack my-project
$ yarn run haul init
Cutting edge
Stable
$('#i').love(jQuery)
$("#nice-button").click(function() {
$("#thingy").animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000);
});
A solution to real problems.
fetch(url).then(r => r.json())
.then(data => console.log(data))
.catch(e => console.log(":("))
Fetch API
New standards
CSS Transitions
Better DOM Api
document.querySelector('div.hello').zoom {
transition: transform 250ms;
}
.zoom:hover {
transition: transform 1s;
transform: scale(2);
}Does it solves your problem?
Is it the best solution
for your problem?
import * as everything from ‘universe’
UI elements
DOM synchronization
User actions
API
Data management
Routing
Explore the pattern
var expr = 'foo';
var obj = {
get [expr]() { return 'bar'; }
};
console.log(obj.foo); // "bar"
Angular 1 template
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', MyCtrl)
function MyCtrl($scope) {
$scope.name = 'Code Europe';
}
</script><div ng-controller="MyCtrl">
Hello, {{getName()}}!
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', MyCtrl)
function MyCtrl($scope) {
$scope.getName = () => {
debugger;
return 'Code Europe';
}
}
</script>
Vue 2 component
<div id="app">
Hello, {{ getName() }}
</div>
<script>
new Vue({
el: '#app',
methods: {
getName () {
debugger
return 'Code Europe'
}
}
})
</script>
Evolutions of same ideas
Social media
the ominous source of hype
Keep calm and wait
Survivorship bias
We are here to make money
We are here to make money
We are here to make money
We are here to make money
We are here to make money
Manage the risks
Done is better than perfect
Make an informed decision
To sum up...
Thank You
Questions?