Los diversos frameworks de desarrollo surgen sin cesar, cada uno con sus ventajas. ¿Cuáles son los más adecuados para los desarrolladores? Este artículo, basado en la popularidad en Github, recopila los 6 frameworks de desarrollo front-end más populares de 2014 y los compara, con la esperanza de ayudar a los amigos que lo necesiten a elegir el framework front-end adecuado para ellos.

Hoy en día, los diversos frameworks de desarrollo surgen sin cesar, cada uno con sus ventajas. ¿Cuáles fueron los que más atención recibieron por parte de los desarrolladores el año pasado? Hace poco, Yunshipei recopiló, según la popularidad en Github, los 6 frameworks de desarrollo front-end más populares de 2014 y los comparó, con la esperanza de ayudar a los amigos que lo necesiten a elegir el framework front-end adecuado para ellos.

1. Bootstrap

Sin duda, Bootstrap es el líder de los frameworks actuales. No solo es popular, sino que su número de usuarios sigue creciendo día a día. Puedes estar seguro de que esta herramienta no te decepcionará; también puedes usarla por sí sola para crear tus propias páginas web.

1421375811123

  • Creadores: Mark Otto y Jacob Thornton
  • Lanzamiento: 2011
  • Versión actual: 3.3.1
  • Popularidad: más de 75,000 estrellas en GitHub
  • Descripción: "Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web."
  • Concepto/principio central: RWD y Mobile First
  • Tamaño del framework: 145 KB
  • Preprocesadores: Less y Sass
  • Responsive: Sí
  • Modular: Sí
  • Plantilla inicial/esqueleto: Sí
  • Conjunto de iconos: Glyphicons
  • Complementos adicionales: no incluidos; hay complementos de terceros.
  • Componente distintivo: Jumbotron
  • Documentación: Buena
  • Personalización: personalización GUI básica, pero requiere modificación manual, porque no tiene herramienta de selección de color.
  • Soporte de navegadores: Firefox, Chrome, Safari, IE8+ (IE8 requiere Respond.js)
  • Licencia: MIT

2. Foundation by ZURB

En comparación con Bootstrap, Foundation ocupa el segundo lugar, pero eso no significa que no sea popular. El fuerte respaldo de ZURB hace que Foundation sea aún más potente. Foundation es utilizado por grandes sitios web como Facebook, Mozilla, eBay, Yahoo, National Geographic, etc.

1421375811476

  • Creador: ZURB
  • Lanzamiento: 2011
  • Versión actual: 5.4.7
  • Popularidad: más de 18,000 estrellas en GitHub
  • Descripción: "The most advanced responsive front-end framework in the world"
  • Concepto/principio central: RWD, Mobile First, Semantic
  • Tamaño del framework: 326 KB
  • Preprocesador: Sass
  • Responsive: Sí
  • Modular: Sí
  • Plantilla inicial/diseño: Sí
  • Conjunto de iconos: Foundation Icon Fonts
  • Otros componentes: Sí
  • Componentes distintivos: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • Documentación: Buena. Hay muchos recursos disponibles como referencia.
  • Personalización: sin personalización GUI, pero puedes escribirla tú mismo.
  • Soporte de navegadores: Chrome, Firefox, Safari, IE9+, iOS, Android, Windows Phone 7+
  • Licencia: MIT
  • Diferenciador: Para sectores como el transporte comercial, la educación y la formación, y la consultoría, Foundation es un framework profesional. También ofrece muchos recursos para que aprendas rápidamente.

3.Semantic UI

Semantic UI se esfuerza incansablemente por hacer que el desarrollo web sea más semántico. Las reglas del lenguaje natural hacen que el código sea más legible y comprensible.

1421375811515

  • Creador: Jack Lukic
  • Lanzamiento: 2013
  • Versión actual: 1.2.0
  • Popularidad: más de 12,900 estrellas en GitHub
  • Descripción: "A UI component framework based around useful principles from natural language."
  • Concepto/principio central: Semantic, Tag Ambivalence, Responsive
  • Tamaño del framework: 552 KB
  • Preprocesador: Less
  • Responsive: Sí
  • Modular: Sí
  • Plantilla inicial/diseño: No
  • Conjunto de iconos: Font Awesome
  • Otros componentes: No
  • Componentes distintivos: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
  • Documentación: Muy completa. Semantic ofrece documentación en varios niveles estructurales, sitios web independientes para principiantes y otros tutoriales de personalización, etc.
  • Personalización: sin personalización GUI, pero puedes escribirla tú mismo.
  • Diferenciador: Semantic puede considerarse el framework más innovador y completo de los discutidos hoy. Su arquitectura general y sus reglas de nomenclatura tienen una lógica y semántica claras, superando a los otros frameworks.

4. Pure by Yahoo!

Pure es un framework escrito puramente en CSS, ligero y modular, que incluye varios componentes integrados e independientes.

1421375811410

  • Creador: Yahoo
  • Lanzamiento: 2013
  • Versión actual: 0.5.0
  • Popularidad: más de 9,900 estrellas en GitHub
  • Descripción: "A set of small, responsive CSS modules that you can use in every web project."
  • Concepto/principio central: SMACSS, Minimalism
  • Tamaño del framework: 18 KB
  • Preprocesador: Ninguno
  • Responsive：Yes
  • Modular: Sí
  • Plantilla inicial/diseño: Sí
  • Conjunto de iconos: Ninguno. Se puede usar Font Awesome como alternativa.
  • Otros componentes: Ninguno
  • Componentes distintivos: Ninguno
  • Documentación: Buena
  • Personalización: Basic GUI Skin Builder
  • Soporte de navegadores: las últimas versiones de Firefox, Chrome, Safari, IE7+, iOS 6.x, 7.x, Android 4.x.
  • Licencia: Yahoo! Inc. BSD
  • Diferenciador: Pure proporciona una base limpia para tus proyectos. Para aquellos desarrolladores que no necesitan un framework con todas las funciones, sino que solo necesitan componentes específicos, Pure es una buena opción.

5. UIkit by YOOtheme

UIkit es un conjunto de componentes conciso, fácil de usar y de personalizar. Aunque no es tan popular como sus competidores, ofrece las mismas funciones que los frameworks anteriores y con muy buena calidad.

1421375811183

  • Creador: YOOtheme
  • Lanzamiento: 2013
  • Versión actual: 2.13.1
  • Popularidad: más de 3,800 estrellas en GitHub
  • Descripción: "A lightweight and modular front-end framework for developing fast and powerful web interfaces."
  • Concepto/principio central: RWD, Mobile First
  • Tamaño del framework: 118 KB
  • Preprocesadores: Less, Sass
  • Responsive: Sí
  • Modular: Sí
  • Plantilla inicial/diseño: Sí
  • Conjunto de iconos: Font Awesome
  • Otros componentes: Sí
  • Componentes distintivos: Article, Flex, Cover, HTML Editor
  • Documentación: Buena
  • Personalización: personalización GUI avanzada
  • Soporte de navegadores: Chrome, Firefox, Safari, IE9+
  • Licencia: MIT
  • Diferenciador: UIkit se utiliza en muchos temas de WordPress. A través del editor GUI y la edición manual, ofrece un mecanismo de personalización flexible y potente.

6.Amaze UI

Amaze UI se basa en el concepto de Mobile First. En comparación con los frameworks extranjeros, presta más atención a la tipografía china. Los ingenieros front-end lo elogian como el framework front-end que mejor entiende el chino. Con solo 4 meses desde su lanzamiento oficial, ya ha obtenido más de 1500 estrellas en GitHub, lo que demuestra su gran impulso.

1421375811398

  • Creador: Yunshipei
  • Lanzamiento: 2014
  • Versión actual: 2.0.0
  • Popularidad: 1500+ estrellas en GitHub
  • Descripción: Amaze UI es un framework front-end multiplataforma con prioridad móvil. Contiene ricos componentes para construir rápidamente páginas multiplataforma con excelente interfaz y experiencia, mejorando en gran medida la eficiencia del desarrollo.
  • Concepto/Principio central: Responsive, Web Components
  • Tamaño del framework: CSS 40KB, JS 48KB (gzipped)
  • Preprocesador: Less
  • Responsive: Sí
  • Modular: Sí
  • Plantilla de inicio/Diseño: Sí
  • Conjunto de iconos: Font Awesome
  • Otros componentes: Sí
  • Componentes únicos: Barra de progreso de carga, barra lateral, carrusel de imágenes, elementos fijos, paginación, paneles plegables, galería de imágenes, etc.
  • Documentación: La documentación de Amaze UI es muy completa y se adapta a desarrolladores de todas las etapas. Proporciona documentación en múltiples niveles estructurales. El diseño de la API es razonable y fácil de aprender y usar. La retroalimentación de errores depende de GitHub, el grupo oficial de QQ y los comentarios de Duoshuo, etc., para que los usuarios puedan informar problemas a tiempo.
  • Personalización: Actualmente no hay personalización mediante GUI. Para personalizar, es necesario descargar el archivo de configuración de personalización, descargar el código fuente de Amaze UI y usar la herramienta de compilación gulp para compilar manualmente.
  • Soporte del navegador: Desarrollado para navegadores modernos, con soporte limitado para IE 8.
  • Lo que lo hace diferente: Amaze UI incorpora más elementos acordes con las características del mercado chino: tipografía china optimizada, compatibilidad con los navegadores locales principales de China, y los componentes web siguen la forma de implementación de Web Components, dividiendo los componentes comúnmente utilizados en el desarrollo móvil en diferentes partes, lo que mejora en gran medida la eficiencia del desarrollo.
¿Qué framework es adecuado para ti?Finalmente, aquí tienes algunas sugerencias para ayudarte a elegir el framework adecuado para ti:
  • ¿Es el framework lo suficientemente popular?
Cuanto más popular es, más personas lo usan, más recursos hay y más formas de comunicarse. Cuanto menor es la probabilidad de que sea abandonado, más seguro puedes estar al usarlo.
  • ¿Está el framework en desarrollo continuo?
Un buen framework necesita actualizarse y mejorarse constantemente para adaptarse a las tecnologías actuales, especialmente en el móvil.
  • ¿Es maduro el framework?
Si un framework no se ha probado en proyectos reales, puedes usarlo para practicar, pero si lo vas a utilizar en proyectos específicos, es más fiable buscar un framework relativamente maduro.
  • ¿Proporciona documentación completa?
En la etapa de aprendizaje, una documentación completa puede ayudarnos a lograr el doble con la mitad de esfuerzo.
  • ¿Cuál es el nivel de especificidad?

En comparación con un framework especial, un framework general puede hacer que el desarrollo sea más simple. En la mayoría de los casos, elegir un estilo mínimo hace que la personalización sea más sencilla; agregar nuevo CSS es más simple, fácil y eficiente que sobrescribir los estilos originales.

Finalmente, si aún no estás seguro de si este framework es adecuado para ti, puedes tomar uno o dos componentes de diferentes proyectos e incorporarlos a tu propio proyecto. Esta composición también debería ser útil.