tm nextjs starter
1.0.0
Este es mi kit de inicio y aplicación de demostración de React, mínimo pero funcional, a partir de agosto de 2018.
Si se siente cansado de la fatiga de Javascript y desea comenzar de manera rápida y sencilla, eche un vistazo a esto. Desarrollar una aplicación SPA React moderna no hay nada más sencillo que esto.
La aplicación de demostración es un sitio estático, una aplicación básica de una sola página que tiene algunas páginas direccionables que se cargan de forma diferida bajo demanda. Demuestra operaciones CRUD básicas: 1) enumerar películas, 2) ver detalles de la película, 3) crear/editar y 4) eliminar una película.
La demostración utiliza el almacenamiento local del navegador para el almacenamiento de datos, lo que significa que se ejecuta sin backend. Las fuentes contienen un módulo que realiza llamadas AJAX reales a un backend REST; solo necesita habilitar el módulo y escribir un servidor, y estará en buen camino para tener una aplicación web real. He desarrollado el servidor API REST RESTPie3 Python que implementa esta API de película simple como ejemplo.
La aplicación de demostración consta de una pila tecnológica simple pero potente que proporciona la funcionalidad esencial para crear aplicaciones web modernas. Se apoya en algunas grandes bibliotecas:
├── /components/ # React components used by pages
│ └── /MyHeader.js # Site header component, just as an example
├── /pages/ # pages
│ ├── /_app.jsx # top level layout of the app, loaded once
│ ├── /about.jsx # about page
│ ├── /index.jsx # home page, lists movies
│ ├── /moviedetails.jsx # details page, views a movie
│ └── /movieedit.jsx # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /styles/ # global SASS files
│ └── /layout.sass # main layout
├── config.js # app config, select ajax or localstorage
├── next.config.js # nextjs configuration, almost empty
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
├── serverapi_localstorage.js # API, talks to localStorage
└── store.js # data store, managed by MobX
A continuación se explica cómo ejecutar el iniciador en su máquina local:
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run devLuego apunte su navegador a http://localhost:3000.
Cuando se modifica cualquiera de los archivos dependientes, los cambios se cargan en caliente y se vuelven visibles al instante. ¡Disfruta del desarrollador!
Nextjs es un gran marco que aporta la cantidad adecuada de orden al caótico ámbito del desarrollo de Javascript. Facilita el inicio del desarrollo de React al ocuparse de las configuraciones y las herramientas, lo que le permite concentrarse en la aplicación principal desde el principio. Proporciona una funcionalidad básica mínima bien diseñada que prácticamente todas las aplicaciones web necesitan.
Beneficios de Next.js en pocas palabras:
Nextjs es lo suficientemente maduro, se lanzó hace aproximadamente 2 años y tiene un ecosistema de complementos saludable. Webpack se utiliza para el trabajo preliminar.
Es perfectamente posible y probable que Nextjs sea reemplazado o fusionado con algo aún mejor en el futuro, pero ahora resume algunas de las mejores prácticas que hacen que valga la pena probarlo.
Redux suele ser la primera opción como solución de gestión de estado para aplicaciones React. Fue una de las primeras bibliotecas disponibles, de la que se habla en muchos blogs y, por lo tanto, ha adquirido casi un estatus estándar.
Tuve sentimientos encontrados acerca de Redux desde el primer encuentro. Siempre me gusta pensar e investigar por mi cuenta y después de leer muchas bases de código de React+Redux y evaluar otras opciones, creo que Redux con su paradigma funcional y puro me parece un poco abstracto y sobredimensionado. (Además, Redux también se usa en lugares donde simplemente no es necesario. Es demasiado fácil exagerar).
En mi opinión, MobX ofrece una solución más sencilla y práctica para la gestión del estado que Redux. Es más fácil de captar y comprender. Requiere menos código repetitivo. Tiene su estado que declara observable, luego simplemente mute su estado y todos los observadores se actualizarán automáticamente. MobX funciona y no estorba.
Los ingenieros discuten si Redux es mejor para una aplicación más grande o para una aplicación "real", pero es una batalla interminable. Por lo general, mi estrategia es mantener mi código sencillo y simple, sin siquiera intentar hacer crecer una aplicación "grande" en primer lugar...
Nextjs brinda soporte para hojas de estilos CSS locales tanto del sitio como de la página.
style jsx (consulte about.jsx, por ejemplo).En esta demostración también experimento con la funcionalidad de cuadrícula CSS, que es un estándar de diseño web reciente. CSS grid es una poderosa herramienta de diseño que finalmente proporciona una forma sólida de definir una cuadrícula bidimensional. Cambiará la forma en que construimos diseños. Si aún no has aprendido o leído sobre el grid CSS, 2018 es un buen momento para hacerlo. El soporte del navegador ya es muy bueno. Pronto se convertirá en algo común.
La capacidad de generar un sitio estático con Nextjs es una herramienta importante que permite ejecutar aplicaciones sin un servidor backend. Puede exportar el sitio a páginas de GitHub, Netlify o Amazon S3. (Pero compruebe algunos errores con los prefijos de sitio+vínculo con páginas de Github).
Otra ventaja de la generación estática es poder conectar la aplicación con cualquier backend REST sin importar cuál sea el idioma del backend. La clara separación entre frontend y backend también proporciona modularización a nivel tecnológico y posiblemente a nivel de equipo.
Una nota sobre SEO: para exportar versiones estáticas de las páginas con datos dinámicos, necesitará crear un script para todas las páginas en la configuración next.config.js; consulte este ejemplo.
Para generar un sitio estático, simplemente ejecute
$ npm run export Y los archivos estáticos se generarán en la carpeta out .
Para probar el sitio estático localmente a través de un servidor www local, ejecuto rápidamente un script en Python: (python3 -m http.server)
$ npm run pyserveY luego pruebe el sitio en http://localhost:8000.
El tamaño de la página de inicio es decente, alrededor de 94 KB minimizados y comprimidos con gzip .
El navegador carga la página de inicio con un total de 6 solicitudes, y cada nueva página que se carga bajo demanda realiza una única solicitud js una vez (recuerde que con React todo se trata de Javascript, no de HTML).
Page Size Inspector Report
URL: https://nextjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________6____94,159
Document________________________________________1_______916
-nextjs.tomicloud.com/ 916
Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js 1,053
-nextjs.tomicloud.com/_next/.../_app.js 2,506
-nextjs.tomicloud.com/_nex.../_error.js 2,490
-nextjs.tomicloud.com/.../main-6a4a..js 86,787
Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css 407(Informe de mi inspector de tamaño de página de extensión de Chrome).
Continúe y tome este iniciador de React y quizás también mi servidor RESTPie3 Python REST API y cree su excelente servicio.
También puedes contactarme para preguntarme si estoy disponible para trabajar como autónomo.
Si prefiere Vue a React, también codifiqué este mismo iniciador con Vue Nuxtjs.
Licencia MIT
