Una super pragmática selección de herramientas Javascript para distintos tipos de proyectos.
Escrito por Camilo Castro y Colaboradores. Para DevsChile.cl.
Esta obra está bajo una Licencia Creative Commons Atribución-No-Comercial-Compartir-Igual 4.0 Internacional
En el ecosistema de Javascript existe una gran multitud de herramientas para poder elaborar proyectos. En este pequeño documento se pondrá una selección pragmática con el fin de facilitar la toma de decisiones. Como siempre, se debe elegir según las necesidades de cada contexto. Tomen esta guía como simples sugerencias.
Se recomienda utilizar Javascript (Con Babel y WebPack) en la mayoría de los casos. Si se desea un lenguaje más orientado a objetos se recomienda utilizar Typescript.
Las herramientas seleccionadas para elaborar proyectos de fontend son las siguientes.
Fácil y simple de usar. Alternativa al venerable Bootstrap y Foundation. Otro contendiente es Tailwind o Skeleton.
Para añadir animaciones utilizando solamente CSS.
Se ha seleccionado React por sobre alternativas como Vuejs o Svelte principalmente por su alta popularidad y la posibilidad de extrapolar los conocimientos a desarrollo móvil con React Native. Una buena alternativa a React es Preact o Inferno, que es básicamente la misma API pero más ligera. Complementar con React Router y React Helmet.
Se recomienda el utilizar React Hooks.
Se recomienda React Bolt para iniciar los proyectos. Una alternativa es Create React App (Ver lista de recursos) o Kyt.
Para validar los estilos css.
Para crear estilos css más modulares y fáciles de mantener.
Un sistema de diseño para productos de calidad empresarial. Un complemento es Material UI. También se recomienda utilizar Storybook (Tutoriales).
Utilizar axios para hacer llamados a servidores REST. Complementar con Cache Adapter, API Sauce y SWR. Para clientes GraphQL se recomienda usar Apollo.
Para el manejo de estado se recomienda utilizar Redux con Redux Thunk. Complementar con Redux Sauce y Redux Persist. Se recomienda seguir el patrón Ducks. Una alternativa a todo esto es DVA, Immer o Vegemite.
Para la elaboración de formularios. Alternativa React Hook Form.
Para la validación de formularios.
Para elaborar estilos CSS en javascript. Alternativa Styled Components.
Una forma novedosa de editar el contenido dentro del sitio web.
PouchDB para sincronizar datos cliente - servidor. Si prefieres SQL puedes usar AlaSQL. Otra alternativa es WatermelonDB.
Moment.js para manejo de fechas. Alternativa DayJS, Date fns o You don´t need Momentjs.
Página web estática simple (Charge.js)
Una simple página web como un landing page. No necesita herramientas complejas. Por lo que se ha seleccionado Charge como una alternativa más ligera a Gatsby.
Página web estática compleja (Gatsby.js)
Sistema web dinámico. (Blitz)
Aplicación Móvil Nativa (React Native)
Permite elaborar aplicaciones utilizando la misma tecnología de React. Complementar con React Navigation y NativeBase. Alternativa NativeScript.
Para elaborar las apps se recomienda Galio Framework y React Native Boilerplate.
Aplicación Móvil Webview (Onsen)
Otorga un marco de trabajo para crear aplicaciones móviles de Webview usando React o JS Vanilla.
Aplicación de Escritorio (Neutralino.js)
Una buena alternativa a Electron.
Aplicación de Consola (Commander.js)
Para crear aplicaciones de terminal.
Para proyectos a nivel del servidor se han seleccionado las siguientes herramientas.
Sistema API Compleja (Hapi pal)
Para trabajar con funciones AWS Lambda (También sirve Hapi Pal). Una alternativa es Middy o Claudia.js. Si no se desea utilizar Amazon se puede utilizar OpenFaaS o Serverless.
Para almacenamiento relacional.
Para almacenamiento de datos rápido, cache y cálculo de puntos de geoposición.
Para orquestar una arquitectura de microservicios.
Para la estandarización de servicios REST. Alternativa de documentación API Blueprint.
Para la estandarización de servicios GraphQL.
Herramientas de uso general.
Estandaríza el estilo de código. Seguir la guía de estilo de AirBNB. Alternativa Standard JS.
Estandariza las opciones en los editores.
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
indent_size = 2Permite corregir y detectar errores al escribir el código.
Utilidades para Javascript. Acá una buena presentación.
Se recomienda usar como:
const _ = require("lodash")Lo anterior servirá para la mayoría de los casos pero Node REPL no soporta
asignar variables con nombre guión bajo _.
Por lo que se recomienda usar:
const lodash = require("lodash")-
lodash.get(): Permite obtener valores de un objeto de forma segura.
-
lodash.sortBy(): la función sort() Javascript convierte los números a string antes de comparar. Por lo que esta función ofrece un mejor mecanismo.
-
lodash.flatten(): Permite convertir un arreglo de arreglos en un arreglo simple.
-
lodash.uniq(): Permite obtener los valores únicos dentro de un arreglo.
-
lodash.merge(): Permite combinar objetos.
-
lodash.keyBy(): Permite transformar objetos para facilitar su utilización.
Editor de código flexible. Para la terminal se recomienda NeoVim.
Extensiones recomendadas
ext install EditorConfig
ext install rainbow-brackets
ext install indent-rainbow
ext install vsc-material-theme
ext install vsc-material-theme-icons
ext install project-manager
ext install vscode-todo-highlight
ext install dotenv
ext install auto-close-tag
ext install es7-react-js-snippetsCursos Recomendados
Para facilitar aplicaciones asíncronas y basadas en eventos con programación funcional. Alternativa Reactive X.
Facilita la creación de proyectos JS.
Para control de código y apoyo en la gestión de proyectos.
Para un servicio de base de datos, push notifications, FAAS y hosting. Una alternativa es Back4App.
Para hospedar páginas web gratuita, simple y rápidamente.
Para tener una gestión de DNS mejorada.
Una buena terminal
Sugar para la fish shell. Se recomienda el theme Bob the Fish con NerdFonts
omf install bobthefish
brew tap homebrew/cask-fonts
brew cask install font-hermit-nerd-font
set -U theme_nerd_fonts yesAntora Docs (Documentación)
La documentación es una importante fase del desarrollo de proyectos de software. Una buena herramienta es Antora Docs. Alternativas son Docsify.js o Docusaurus.
-
PHP: Laravel + Livewire.
-
Elixir: Phoenix Framework.
-
C#: Blazor.