¿Cómo seleccionar un marco de interfaz de usuario comercial y una biblioteca de interfaz de usuario?

Esto le ayudará a comprender la gran cantidad de herramientas de la comunidad front-end.

Por supuesto, estas son sólo algunas listas opcionales que le ayudarán a decidir cuándo debe tomar una decisión.

¿Lo uso yo mismo?

Sí, lo uso como recordatorio cuando necesito iniciar un proyecto.

Al mismo tiempo, cada vez que alguien pregunte "¿Qué framework debo usar?", le mostraré este artículo.

Porque, como comprenderás, no existe un bien o un mal absoluto, pero sí algunos buenos marcos que pueden ayudarnos a tomar mejores decisiones.

Además, actualizaré este artículo de vez en cuando, porque a veces cambio mis ideas originales después de aprender más.

¿Cómo debería empezar?

Si su proyecto no es muy pequeño, debería necesitar lo siguiente:

Personalmente prefiero Component para la modularización de proyectos. arquitectura, tal como se aplica a varios marcos

Además, considere algunos otros ejemplos, como BOT, Elm Architecture o re-frame o CycleJS

Cargador de módulos (RequireJS, Browserify, Webpack , ComponentJS, SystemJS)

Estas cosas pueden ayudarnos a mantener Javascript (o componentes) independientes entre sí y mantenibles.

Administradores de paquetes (npm, jspm, bower)

Personalmente siempre prefiero npm, parece que es el verdadero estándar para javascript y nodejs. Además, consideraré Bower para complementarlo, porque es una buena herramienta para descargar recursos estáticos, pero no es tan poderosa como npm en la gestión de componentes y dependencias.

Implementación/compilación/canalización de compilación automática (grunt/gulp/brunch/broccoli)

Porque la vida es corta si sigues haciendo cosas repetitivas.

Preprocesamiento de CSS (jss/stylus/sass/css-modules) y postprocesadores (css0, autoprefixer, postcss)

Estas herramientas mejoran CSS y eliminan algunos problemas de compatibilidad del navegador. Sí, lo sé desde 2015, pero de todos modos, fue un punto débil en el pasado.

Creación de marcos (Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

Estos marcos permiten que muchos desarrolladores web trabajen juntos y lo ayudarán a manejar el diseño y el estilo básicos.

Sin embargo, puedes considerar crear tu propia solución si te sientes bien con la construcción o quieres convertirte en un experto en front-end, o si necesitas crear elementos visuales básicos para tu empresa.

Si este es el caso, se recomienda utilizar metodologías (BEM, OOCSS) lo antes posible, pueden ayudarle a ahorrar tiempo.

Personalmente, prefiero el método de nomenclatura BEM y el flujo de trabajo básico. Puedes encontrar inspiración para ayudarte en la guía de estilo de Brainly.com.

Si no construye componentes básicos, le recomiendo que eche un vistazo a las herramientas de prueba HTML5 Boilerplate (jasmine, karma, mocha, tape, itern) para todos los que necesiten realizar pruebas, sin excepción.

Herramientas de monitoreo de calidad de código (eslint, husky, editorconfig) Comunidades donde puede obtener ayuda (chats, IRC, reuniones, Twitter)

Bien, ¿qué sigue?

Hay algunas preguntas que vale la pena considerar antes de elegir tu herramienta.

¿Estás listo? ¿Necesito trabajar con alguien más? ¿Quiénes son? ¿Qué quieren?

Esta pregunta te ayudará a elegir un idioma y un flujo de trabajo que te ayudarán tanto a ti como a tu socio. ¿Qué es lo que más me preocupa? ¿Calidad, velocidad de desarrollo o mantenibilidad?

De esta manera puedes decidir si experimentar con algunas herramientas nuevas y si puedes permitirte el riesgo de fracasar. ¿Es necesario que esté abierto a terceros?

Los diferentes equipos pueden limitar nuestras opciones de idioma. ¿Estoy tratando con proyectos centrales?

Si se trata de proyectos centrales, es mejor elegir lenguajes y marcos de alta estabilidad, que son más seguros y le permiten dormir mejor. ¿Es una aplicación interactiva o una página de documentación básica?

El resultado es probable que solo necesites herramientas básicas de HTML + CSS +, o un generador de sitios web estáticos o CMS. ¿Es este un proyecto único o un proyecto relacionado con otros proyectos?

Incluso si tienes una serie de proyectos, aún debes usar algunos componentes y estilos para guiarte, que tienen buena documentación.

Reduzca directamente la reutilización de código y mantenga la coherencia.

Además, considere el SEO y el renderizado del lado del servidor.

Lista de idiomas

Una vez que hayas respondido las preguntas anteriores, podrás chatear con tus compañeros de equipo y elegir un idioma.

Debido a que aquí hay mucho más que un Javascript incorrecto, puedes elegir si deseas tener un equipo de desarrollo js

Considera ES6 (compatible con babel)

Esto Haz tu vida más sencilla. ¿Prefieres idiomas escritos? ¿Es posible desarrollar mecanografiado?

Considerando el texto mecanografiado, ¿es aceptable la programación funcional?

Puedes comenzar con una biblioteca ES6 simple, como lo-dash o ramda.

Aquí hay algunos tutoriales y libros que le ayudarán a comenzar su gran viaje. ¿Has probado la programación funcional y quieres algo mejor?

Prueba el olmo, ¡es genial! ¿Puedes ir al máximo?

Prueba clojurescript, está genial. ¿Te gusta la ensalada?

Prueba scalaJS ¿Conoces Haskell?

Prueba purescript, es realmente genial. ¿Quieres más cosas locas?

Aquí tienes una lista de lenguajes que se pueden compilar en JavaScript, elige uno y disfruta.

Lista de marcos ¿Solo necesitas una aplicación básica que funcione?

¿No tienes tiempo para tareas más complejas?

Pruebe angular y comience a buscar ayuda de inmediato. ¿Necesita con frecuencia crear prototipos rápidos? ¿Hay algún problema que pueda solucionarse en el futuro? Pruebe angular. Algunas preguntas ¿Está probando el desarrollo front-end para el back-end?

Pruebe angular. Encuentre algunos desarrolladores front-end. ¿Necesita desarrollar y construir rápidamente, pero al mismo tiempo perder algunas funciones?

Pruebe la misma selección de tecnología que el signo comercial/backbone, ¿cómo pasar de mediano a grande?

Agregue marioneta/chaplin a su columna vertebral y también considere Reackjs. ¿Tiene algo de tiempo para experimentar y obtener una gran mejora en el rendimiento al mismo tiempo?

Pruebe mithril/knockout/aurelia. ¿Tiene un buen espíritu experimental de front-end y está familiarizado con la programación funcional?

Pruebe ReactJS+Redux+ImmutableJS ¿Más habilidades de programación funcional? ¿O prefiere aplicaciones altamente interactivas?

Utilice flujos reactivos (bacon, rxJS) o pruebe Cycle.js (experimental)

Nota 1: agregar flujos cualquiera sería una buena opción y se puede recomendar a otros.

Nota 2: No rechace los flujos reactivos usando FRP. ¿Quiere utilizar una validación estricta y un procesamiento universal?

¿Tu aplicación será cada vez más grande?

¿Tienes pensado ampliar tu equipo?

¿Tienes tiempo para aprender cosas nuevas?

Se recomienda dedicar tiempo a aprender EmberJS, ¡será una buena inversión! ¿Necesita una "aplicación similar a un escritorio"? ¿Su aplicación tiene tablas, leyendas u otras capacidades analíticas? ¿Está creando aplicaciones empresariales? Pruebe ExtJS ¿Es usted un estudio que presta servicios a otros desarrolladores? Será mejor que tenga un buen conjunto de herramientas y es mejor tener algunos casos de uso comunes entre colegas. ¿Es usted un desarrollador independiente que proporciona herramientas a otros? Adáptese a sus elecciones. Pruebe angular, no causará muchos problemas y permitirá que otros obtengan lo que quieren. Nota: No cambie las necesidades de sus clientes si alguien más paga por ellas. ¿Está creando un producto atractivo que mucha gente utilizará? Una vez que tengamos requisitos claros, seleccionamos un marco adecuado de la lista anterior. Tiene requisitos claros sobre qué tipo de aplicación desarrollar (como una aplicación móvil de 10 pantallas). Dedique dos semanas a experimentar con requisitos específicos (ionic, Famous, Sencha Touch).

¿Cómo empezar a codificar? Dedique algún tiempo a leer la documentación del marco o herramienta elegido. Pregunte a algunos desarrolladores experimentados de la comunidad cuál es el comienzo de un gran proyecto. Prepare todas las herramientas. Espíritu friki. Pero recomendaría un poco más de ingeniería. ... éxito.

¿No sabes cómo utilizar algunos de los marcos poco comunes que presenté?

Echa un vistazo a los ejemplos de TodoMVC para encontrar el framework de tu elección.

Pero recuerda, estos proyectos son sólo ejemplos y en la mayoría de los casos no son adecuados para proyectos medianos y grandes.