Pixela
Creamos experiencias digitales
Vue JS: Frontend sin limites
Sobre Mí
- UX Developer / Co-fundador Pixela
- Apasionado por el diseño y la animación
- 7 años en desarrollo web
Desarrollo de frontend
Flujo de trabajo productivo
- Manejo de dependencias
- Flujos para desarrollo y producción
- Hot-reloading
- Linters
- Pruebas unitarias
- Pre-compiladores
- Minificación
- Compresión
- El mayor número de features en el mayor número de navegadores
Días sin un framework de javascript
Todos los días nace un nuevo framework de javascript, pero no todos los días nace una nueva comunidad
- Es un framework progresivo para constuir interfaces de usuario
- Creado en 2014 por Evan You
- La comunidad de Vue está creciendo a un ritmo estrepitoso
Partes Clave de Vue
- Sintaxis declarativa
- Componentes
- Directivas
- Single File Components
- Plug and play
¿Cómo se ve Vue?
<template>
<transition name="modal">
<div class="modal">
<div
class="modal--close"
@click="$store.dispatch('navigation/close')"/>
<div
class="modal__box"
data-scrollbar>
<slot class="modal__content"/>
<span
:class="{ 'dark': dark }"
class="icon-close"
@click="$store.dispatch('navigation/close')"/>
</div>
</div>
</transition>
</template>¿Cómo se ve Vue?
import SearchForm from './search-form/SearchForm.vue'
export default {
components: {
SearchForm
},
props: {
mode: {
default: 'doctors',
required: false,
type: String
},
placeholder: {
default: 'Busca doctores, nutricionistas, dentistas...',
required: false,
type: String
}
}
}¿Cómo se ve Vue?
No se trata solo de crear un framework
DX en la filosofía de Vue
Un framework para aplicaciones
universales
Nuxt: The vue framework
Out of the box
- Minificación de código
- Linters
- Server-side rendering
- webpack
- vue-router
- vuex
Customizable
- Preprocesador css (sass, less, stylus, vanilla css)
- Typescript
- Templating languages (pug, vanilla html)
- plugins
SPA - Universales
Vue en producción
Transparencia al crear comunidad
El proceso RFC
¡Gracias!
/t4r0
/T4r0_o
https://vuejs.org
https://twitter.com/vuejs
https://github.com/vuejs/
https://nuxtjs.org/
https://twitter.com/nuxt_js
https://github.com/nuxt
Vue: Construyendo desde la comunidad
By Pixela
