Vuejs para programadores jQuery. Presentación del proyecto. I

Vuejs para programadores jQuery.

Presentación del proyecto.

Este tutorial (o serie) se hará porque después de hablar con algunos programadores hemos notado que había una falta de información más explicita para desarrolladores jQuery (que es donde todos hemos estado) para comprender de forma práctica el cambio de paradigma de un framework reactivo.

En la mayoría de tutoriales los cambios son bastante apabullantes. Webpack, instaladores Cli, frameworks css, estructura de carpetas, etc.

La idea aquí es hacer el cambio lo más visual, simple, comparable y entendible posible. Para eso el tutorial adoptará algunas medidas:

* Se usará Bootstrap para la estética. La razón es que la mayoría de programadores jQuery ya usa Bootstrap y no habrá dudas o distracciones innecesarias en ese punto. La única novedad es que se usara Bootstrap Native. Sin dependencias

* Se usará Vue desde el cdn. Se hará así para reducir (notablemente) más cambios de estructura. Se ha elegido Vue porque es el framework que controlo. No es una imposición.

* No se pondrá ninguna de las dos opciones como mejor o peor. Se usará el mejor código posible y que cada uno valore. Todo el código es mejorable. Si se sugieren mejoras se tomaran en cuenta.

* El código fuente estará disponible, tanto en GitHub como en CodeSanBox.io para que pueda ser de fácil acceso y permita modificarlo para comprobar lo que haga falta

* El código tendrá un post o cada post tendrá un código, se puede ver de las dos formas. En el post se explicará lo que haga falta. Eso no quita que puedan haber post que se desvíen de la línea seguida porque falte aclarar algo.

Ahora vamos a explicar los templates y la forma de trabajo.

Cada proyecto se divide en carpetas que contienen 3 archivos:

Index -> Es un archivo HTML básico que contiene dos iframe para cargar los dos HTML (jQuery y Vuejs)

jQuery -> Es el código jQuery correspondiente

Vuejs -> El código Vuejs

En el archivo jQuery y Vuejs son iguales en cuanto a la estructura del body en HTML. Puede variar que jQuery tenga algún id más o Vuejs pueda tener código propio en los elementos pero la estructura de elementos y clases es idéntica (o por lo menos esa es la intención).

El nombre de los archivos intenta dar una indicación de lo que se trata en el archivo (además de la carpeta contenedora) así por ejemplo el trabajo con input simple contiene 3 archivos llamados así: indexInputSimple.html, jQueryInputSimple.html, vuejsInputSimple.html

Existe un archivo más en la raíz del programa. Es un HTML simple que sencillamente contiene una lista simple con un índice para cargar desde allí los proyectos hechos.

En cada post sé indicada la carpeta del proyecto que se trate y la URL del codesandbox.io correspondiente.

En este post toca el GitHub principal: https://github.com/Gonzalo2310/jQuery-Vuejs y el codesandbox.io se usará para la edición del contenido. Su uso es sencillo a las urls github.com hay que agregar simplemente la palabra box de la siguiente manera: githubbox.com. Así esta url de GitHub para codesanbox se convierte en: https://githubbox.com/Gonzalo2310/jQuery-Vuejs

Indice:

• Inicio. Uso de {{}} en Vuejs. v-model. Instancia vue. Significado de "el". ¿Por qué id="app"?. Los datos en la instancia de Vuejs (data). Evento input. Enlace: https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-form.html

• Errores. Control de errores. El if ternario en js. :class, @ para los eventos en vuejs. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-form_9.html

• Filtro. Filtro de contenido. THIS en Vuejs. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-form_11.html

• RadioButton y CheckBox: v-model con arrays y Booleans. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery_12.html

• Estilos Inline y Clases CSS: @click, :style, v-if, v-else, Virtual DOM, computadas. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-clases.html

• Tabuladores: evt en jQuery, v-show, v-for. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery_16.html

• Select Simple. v-model en select. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-select.html

• Selects relacionados: Importación de una constante externa. HTML: como funciona <script>. jQuery: Template functions. Js: every(), notación arrow, join(), find(), if inútiles y else innecesarios (Aclaración), Vuejs: repaso de conceptos y watch. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-selects.html

• Filtros en Selects: JS: desestructuración, plantillas de cadenas de texto (${}), filter(), includes(). https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-selects_19.html

• Selects dinamicos y componentes: JS: copias por referencias (array y objetos), findIndex(), splice(), incremento (++pre y post++), Vuejs: componentes (explicación, concepto, creación del primero), $emit, eventos propios. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-selects_22.html

• Una mini y sencilla hoja de cálculo: HTML: &nbsp; CSS: display grid. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-una.html

• Galería de imágenes: CSS: @keyframe, JS: setTimeout(), VueJS: Ciclo de vida de un componente. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-galeria.html

• Selección múltiple. Menús: Vuejs: Transition. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-select_25.html

• Tabla simple y paginación:  JS: Array.From, Vuejs: v-html. https://comunidad.programaresunamierda.com/2020/06/vuejs-para-programadores-jquery-tablas.html

Por último dejo aquí una imagen del proyecto inicial. No quiere decir que no haya variaciones, es una guía de inicio.

Dudas en los comentarios, en el Slack de PEUM o en Twitter.