Vue for Everyone

What is Vue? 

What is Programming?

Telling the computer what to do

The Process of creating Software

Design and build an executable program by:

  • performing analysis,
  • generating algorithms,
  • profiling algorithms' accuracy and resource consumption,
  • implementing those algorithms in a chosen programming language.

And also while:

  • testing,
  • debugging,
  • maintaining source code,
  • implementing build systems,
  • managing derived artifacts and
  • documenting the process

https://en.wikipedia.org/wiki/Computer_programming

Ok

Where does this comes from?

(Just a few historical milestone, not the whole History)

 Difference Engine

Charles Babbage

ADA LOVELACE

ADA LOVELACE

BADAss LOVELACE

19th Century

Fast forward... 

Sir Tim Berners-Lee

1989, 1990

brendan eich

December 4, 1995

evan you

February 2014

out of thin air

Me, debugging my code

Having a career in tech does not automatically mean you have to code. Everyone is not meant to be an engineer.

Disclaimer

  • UI/UX Designer
  • UX Researchers
  • Data Analysts
  • SEO Specialist
  • Content Strategist
  • Program/Project Managers
  • Software testers
  • System Admins
  • HR
  • ...

A little bit about front END

Front End / Front-end / Frontend / FrontEnd

✍🏾

"View Layer"

"User Interaction"

"Where all user frustrations get directed"

What is Front End

"User InterFACES"

"User EXPERIENCE"

HTML

.Net, C#, Python...

 + CSS

 + JS

Front End Technologies

(WASM)

(GLSL)

("RUNNING" IN A Web BROWSER)

What ISN'T Part of Front End

  • Node.JS (even though being Javascript)
  • Databases...
  • Cloud: Firebase, Azure, Amazon (AWS)
  • Blockchain
  • AI
  • iOS, Android (Swift, Kotlin/Java)

❌

❌

❌

❌

❌

❌

3 MAIN layers of front end

HTML

HTML

  • Contains the content within an structure
  • Is semantic: gives cues for the appearance of the document
  • Accessible: Different technologies read it and interpret it
  • It's important for SEO
  • Commonly is used with "template engines" within frameworks.

CSS

CSS

  • Styles y animations
  • "Layout"
  • Responsiveness
  • Cross Browser Compatibility
  • Commonly used with CSS frameworks and JS frameworks.

Javascript

JS

  • Logic related to the UI.
  • User interaction... Examples:
    • Complex animations,
    • Form validations,
    • React to events in the application,
    • Sync data from and with UI,
    • Retrieve or send data to servers.

  • Commonly used with JS frameworks.

Recap

🔎 Demo 🔍

Why using a JS Framework?

  • Improve code reusability.
  • Create guidelines to treat data in an app.
  • Help us maintain code across teams.
  • ...

 

The biggest, by far, improvement these frameworks provide is having the ability to implement UIs that are guaranteed to be in sync with the internal state of the application

https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445

Alberto Gimeno

If UI frameworks didn't exist, we would be creating them: automate repeated tasks.

JS Frameworks

  • React,
    • Usually + Redux
  • Angular,
    •  Necessarily + RxJS + TS (TypeScript)
  • Vue
    • Usually + Vuex
  • Others:
    • Svelte, Preact, Ember, Stencil, Polymer, Inferno, Aurelia...

Which one to choose?

CTOs!

system quality attributes ("ilities")

  • functionality,
  • debuggability,
  • scalability,
  • securability,
  • testability,
  • maintainability,
  • performance
  • ...

https://en.wikipedia.org/wiki/List_of_system_quality_attributes

Some numbers 📈 

V

R

A

https://stateofjs.com/2017/front-end/worldwide/

Some numbers 📈 

https://2018.stateofjs.com/front-end-frameworks/overview/

Differences with other frameworks

 👨‍👧 👨‍👧‍👦 👨‍👧‍👧 👩‍👦 👩‍👦‍👦

https://vuejs.org/v2/guide/comparison.html

It is a View focused library for building user interfaces 

https://vuejs.org/v2/guide/#What-is-Vue-js

Simplest Vue.js example

https://codepen.io/brav0/pen/xWJoLO 

<div id="simplest-example">
  <h1>{{ whatever }}</h1>
</div>


<script>
new Vue({
  el: '#simplest-example',
  data: {
    whatever: 'Hello world',
  }
})
</script>

Components

Vue components extend basic HTML elements to encapsulate reusable code.

<div id="app">
  <button-clicked></button-clicked>
</div>

<script>
Vue.component(
  'button-clicked',
  {
    data: () => ({
      count: 0,
    }),
    template: `
      <button
        v-on:click="onClick"
      >
        Clicked {{ count }} times
      </button>
    `,
    methods: {
      onClick() {
        this.count += 1;
      }
    },
  }
);

new Vue({
  el: '#app',
});
</script>

Single File Components

With Vue.js (and the power of modern building tools)

  • we have really powerful applications 💪🏽
  • real good, real quick 💃🏾
  • that are flexible and performant 🚀

Personal Statement

  • It super friendly with other libraries.
  • It is ergonomic,
  • easier to learn than others,
  • and to understand.
  • Has a great community.

Questions?

GRACIAS

🖖💕💕💕💕🖖