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:
Por último dejo aquí una imagen del proyecto inicial. No quiere decir que no haya variaciones, es una guía de inicio.
Mind Map proceso


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

No hay comentarios:

Publicar un comentario

Vuejs para programadores jQuery. Galería. Load More XVI

Vuejs para programadores jQuery. Galería. Load More XVI En el artículo de hoy vamos a tratar el tema de plugins de jQuery (crearemos dos) ...