¿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: Modularización del proyecto. Personalmente prefiero la arquitectura basada en componentes porque es aplicable además de varios-frameworks

Considere algunos otros ejemplos como BOT, Elm Architecture o re-frame o CycleJS

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

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

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 (gruñido/trago/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 construyes componentes básicos, te recomiendo que eches un vistazo a HTML5 Boilerplate

Herramientas de prueba (jasmine, karma, mocha, tape, itern)

Cualquiera Todos deben hacerse la prueba, sin excepciones.

Herramientas de monitoreo de calidad de código (eslint, husky, editorconfig)

Comunidades donde puedes obtener ayuda (chats, IRC, meetups, twitter)

Bien, a continuación ¿Qué tal un paso?

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 a ti y 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 abrirlo a terceros?

Los diferentes equipos pueden limitar nuestras opciones de idioma.

¿Estoy trabajando en proyectos principales?

Si está trabajando en proyectos principales, 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 Javascript incorrecto, puedes elegir

¿Existe un equipo de desarrollo js?

Considera ES6 (compatible con babel)

p>

Esto te hará la vida más fácil.

¿Prefieres idiomas escritos? ¿Es posible desarrollar mecanografiado?

Considere 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 full stack?

Prueba clojurescript, es genial

¿Te gustan las ensaladas?

Prueba scalaJS

¿Conoces Haskell?

Prueba purescript, es realmente genial

¿Quieres más locos?

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 crear prototipos rápidamente con frecuencia?

¿Hay algún problema que pueda solucionarse en el futuro?

Prueba angular. Algunas preguntas

¿Estás 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 ampersand/backbone

¿Cómo elegir la misma tecnología de mediana 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?

Prueba mithril/knockout/aurelia

¿Tienes un buen espíritu experimental de front-end y estás 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 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 de análisis? ¿Está creando aplicaciones empresariales?

Prueba ExtJS

¿Eres un estudio que brinda servicios a otros desarrolladores?

Será mejor que tengas 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áptate a sus elecciones.

Pruebe angular, causará menos problemas y permitirá que otros obtengan lo que quieren.

Nota: No cambies las necesidades de tus clientes si alguien más paga por ello.

¿Estás creando un producto atractivo que será utilizado por mucha gente?

Una vez que tengamos los requisitos claros, seleccionamos un marco adecuado de la lista anterior.

Tienes requisitos claros sobre qué tipo de aplicación desarrollar (como una aplicación móvil de 10 pantallas)

Dedica dos semanas a probar 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 que haya elegido.

Pregunte a algunos desarrolladores experimentados de la comunidad cuál es el comienzo de un proyecto excelente.

Prepara 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.