Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Breaking FrontEnd Paradigms with Vue.js 🇺🇸

Breaking FrontEnd Paradigms with Vue.js 🇺🇸

Ignacio Anaya

January 12, 2018
Tweet

More Decks by Ignacio Anaya

Other Decks in Programming

Transcript

  1. ! Ignacio Anaya @ianaya89 • Full Stack Developer, Tech Trainer

    & Speaker • Ambassador @Auth0 • Organizer @Vuenos_Aires Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 2
  2. ! The Progressive Framework • View focused • Core based

    • VDOM • Reactive • Components Oriented Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 18
  3. !" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script>

    new Vue({ el: '#app', data: function () { return { hello: 'Hello Sandusky ! !' } } }); </script> Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 21
  4. !" <script src="https://unpkg.com/vue"></script> <div id="app"> {{ hello }} </div> <script>

    new Vue({ el: '#app', data: function () { return { hello: 'Hello Sandusky ! !' } } }); </script> Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 22
  5. ! render() new Vue({ el: '#app', data: function () {

    return { hello: 'Hello Sandusky ! !' } } render: function () { return ( <h1>{this.hello}</h1> ) } }) Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 23
  6. ♻ Life Cycle Hooks new Vue({ created: function () {

    console.log('I am alive ! ') } }); Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 28
  7. ☎ Communication • ⬇ Properties Down • ⬆ Events Up

    Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 29
  8. ! Native Script & Weex Mobile Native Rendering Breaking FrontEnd

    Paradigms with with Vue.js ! " - @ianaya89 38
  9. ! Take Away • ! Progressive (Simple & Complex) •

    " Declarative Rendering • # Component System • $ Great Ecosystem • % Awesome Community Breaking FrontEnd Paradigms with with Vue.js ! " - @ianaya89 39