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?

Made with Slides.com