A partir de cero, ¿qué tecnologías y marcos de front-end utilizarías para construir un sitio web hoy (enero de 2015)?

– ¿Qué framework javascript debo usar? ¿Angular?

Vale la pena aprender al menos los conceptos básicos de uno de ellos, pero no es necesario. Para la mayoría de los sitios web, los marcos como estos son excesivos, mejor para las aplicaciones, por lo que, dependiendo del trabajo que realice, podría no ser del todo útil y es difícil aprender algo si no lo usa todo el tiempo. Es probable que haya más demanda para este tipo de trabajo, así que sí, míralo. Angular es probablemente el más popular y divertido de usar, y tiene la mayor cantidad de documentación y ayuda disponible en línea, por ejemplo, consulte egghead.io. Aprenda AngularJS con tutoriales, videos y capacitación para obtener excelentes tutoriales. Sin embargo, tenga en cuenta que Angular 2.0 pronto se lanzará y es básicamente una reescritura completa con muchos cambios importantes, por lo que si elige Angular, tal vez se centre en eso. Si bien Angular es divertido, Ember es seguramente el mejor, y React es el que está ganando popularidad con mayor rapidez, por lo que definitivamente son los 3 que querría considerar. Dicho todo esto, recientemente ha habido muchos artículos sobre noticias de hackers (diciembre de 2014 – enero de 2015) que afirman que es probable que 2015 vea la disminución de estos grandes marcos a favor de los más pequeños.

– ¿Qué sistema de red es mejor para dispositivos móviles primero?

Cualquier sistema de red que le guste y con el que se sienta cómodo. Pruebe algunos y simplemente elija uno. Me gusta The Semantic Grid System porque viene en 4 sabores: LESS, SASS, Stylus y vanilla CSS, por lo que puedo usarlo junto con cualquier base de código heredada o marco de front-end. También ofrece la opción de especificar anchos para módulos con nombres semánticos en lugar de agregar muchas clases como “small-12-col medium-4-col large-3-col”.

– ¿O debería considerar uno de los marcos de interfaz de usuario existentes, como Bootstrap?

Nuevamente, al igual que con los frameworks de JavaScript, querrá estar familiarizado con al menos 1 para poder usarlo si lo necesita, pero no son completamente necesarios. Bootstrap o Foundation son los más conocidos, pero otros buenos incluyen la interfaz de usuario semántica, inuitcss, Gumby, un marco CSS flexible y receptivo, impulsado por Sass (y muchos, muchos más). Estos marcos generalmente solo son recomendables en las siguientes circunstancias, ya que imponen algunas restricciones en términos de rendimiento (los archivos CSS y JS pueden ser bastante grandes) y diseño estético:

• necesitas construir algo rápido
• creación rápida de prototipos / estructura de alambre
• el diseño que necesita lograr se adapta perfectamente a los módulos disponibles en el marco

– ¿Debo estar usando componentes web? ¿De qué habla todo esto de Polymer?

Probablemente todavía no, pero debería estar aprendiendo sobre ellos y listo para comenzar a ejecutar a fines de 2015. Polymer es como un polyfill para componentes web nativos, pero aún es útil y divertido para jugar y le da una gran idea de lo que pronto podremos lograr con componentes web nativos.

– ¿Debo usar preprocesadores CSS?

Seguro. SASS es el más popular, pero prefiero Stylus porque puede hacer todo lo que SASS puede hacer, solo con una sintaxis más limpia.

– Diseño de materiales?

Meh, pasando de moda. Hay muchos temas de diseño similares disponibles.

– ¿Cuál es la mejor solución de gestión de paquetes?

Básicamente tienes Bower y NPM. Prefiero NPM porque el formato del paquete siempre es consistente (CommonJS), pero probablemente necesitará usar ambos, ya que no todo lo que necesitará está en uno u otro, y los paquetes solo CSS normalmente solo están disponibles en Bower. Comienzo cada proyecto con un archivo bower.json y package.json.

Básicamente, aquí estaría mi lista de verificación de todo lo que un desarrollador front-end moderno debe tener en su caja de herramientas:

• Vanilla CSS + familiaridad con prácticas modulares y convenciones de nombres como BEM, OOCSS, SMACSS: intente leer todo lo que Harry Roberts en CSS, OOCSS, arquitectura front-end, rendimiento y más, por Harry Roberts haya escrito
• Un preprocesador CSS: SASS le dará la mayor cantidad de opciones
• Vanilla JavaScript + familiaridad con los patrones del módulo JS y cómo organizar su código
• Un precompilador de JavaScript, por ejemplo, CoffeeScript
• Un cargador de módulos de JavaScript como RequireJS (AMD) o Browserify (CommonJS)
• Un corredor de tareas como Gulp o Grunt
• SVG
• NPM
• Cenador
• Un lenguaje de plantillas HTML, por ejemplo, Jade

Vengo de la otra dirección, conozco principalmente el desarrollo front-end y trato de manejar el back-end para poder hacer algunos proyectos completos.

Si quieres un desarrollo rápido y receptivo, definitivamente quieres aprender Bootstrap. Hay una razón por la que el marco se está apoderando de la web. Muchos diseñadores y expertos en CSS lo critican, pero a menos que UX y el diseño sean sus grandes cosas, Bootstrap es su amigo.

Boostrap tiene su propio sistema de cuadrícula, basado en una cuadrícula de 12 columnas. Yo solo iría con eso. La versión 3 se creó teniendo en cuenta los dispositivos móviles primero, y los puntos de interrupción de los medios en Boostrap son excelentes, por lo que es trivial hacer un diseño que tenga tres columnas en un monitor y luego tener esos divs en un dispositivo más pequeño.

Bootstrap también es muy fácil de aprender. Literalmente, podría comenzar a construir sitios con él en un día, si ya comprende HTML y CSS básico.

Angular está de moda en este momento. Todavía no he trabajado con él, pero sigo recibiendo preguntas de otros desarrolladores que conozco, y mucha gente se está tomando el tiempo para aprenderlo, por lo que tiene impulso. Probablemente valga la pena.

jQuery, si aún no lo sabe, también es algo muy bueno para recoger. Si ya conoce JavaScript y cómo usar los selectores CSS, puede aprender jQuery muy rápidamente.

¡Buena suerte en tus proyectos!

Es bastante sangriento, pero recomiendo la siguiente pila:

1. ReactJS + Redux
2. Elija su propia capa de datos. Parse o Firebase podrían funcionar en caso de apuro.
3. Alojado en un CDN como divshot o s3 + rápidamente. Esto permite un tiempo constante para el primer byte en todo el mundo.
4. Utilice Webpack y renuncie a las herramientas de compilación estándar.
5. CSS simple para estructura y estilos en línea para componentes
6. La interfaz de usuario del material es bastante elegante, hay una biblioteca de componentes de reacción que lo imita.
7. No estoy seguro acerca de la cuadrícula. Quizás flex box (la propiedad css3) es lo suficientemente fácil como para construir un sistema de cuadrícula tonto. Probablemente puedas encontrar algunas cosas buenas ya construidas.
8. Hay complementos de paquete web que integran su preprocesador CSS de su elección. Creo que debería ir con los estilos en línea para componentes a nivel de componentes, sin embargo, para mejorar la escalabilidad a largo plazo.

¿Por qué?
—–
Las aplicaciones React hacen que sea muy fácil razonar sobre una aplicación. Flux (Redux es el nombre de una implementación del patrón Flux) en combinación con eso solo hace que su aplicación sea realmente simple de pensar.

Webpack le brinda herramientas de compilación realmente inteligentes para empacar su aplicación fácilmente. Como resultado, puede dejar de pensar en las herramientas de compilación.

En el lado del diseño, quién sabe. Las cosas siempre están cambiando. La interfaz de usuario material parece increíble. Si me preguntaste hace un año, probablemente te diría que los gradientes se han ido para siempre … pero parecen estar volviendo.

Comenzaría con Ruby on Rails. Permite la creación rápida de prototipos para que no tenga que esperar mucho tiempo para obtener resultados y también tiene una gran comunidad de desarrolladores que crean extensiones. Usamos Bootstrap (CSS Framework) para que esté listo para dispositivos móviles. A veces creamos interfaces similares a Facebook con React (biblioteca de JavaScript), que es una biblioteca creada y utilizada por Facebook (empresa).

¡Buena suerte!

No necesita manejar todas las cosas si elige usar WordPress. Simplemente elija / compre un tema adaptable según sus necesidades. A continuación, utilice algunos de los complementos recientemente disponibles para deshacerse de la actualización de la página.

Creo que la sugerencia anterior está en línea con lo que está buscando (desarrollo rápido, comportamiento ingenioso, mantenibilidad, diseños receptivos para dispositivos móviles y capitalización de las tecnologías de navegador más avanzadas). Sin embargo, si su objetivo es aprender tecnologías front-end, escuche lo que otros dicen.