¿Cuáles son los mejores consejos para ahorrar tiempo en el desarrollo web de aplicaciones para usuario?

Answer 1

Hay muchos factores diferentes que pueden acelerar o ralentizar el desarrollo del frontend, intentaré cubrir la mayoría de ellos, espero que les guste 🙂

1. Hacer wireframes / protoypes

Puede parecer que perderás mucho tiempo creando un prototipo de tu aplicación y haciendo estos bocetos. Personalmente he estado haciendo esto para la mayoría de mis proyectos. El punto es que, si no sabe exactamente cuál es el resultado que espera, no se enfocará solo en el desarrollo y dejará de desarrollar para pensar en el diseño, UI, UX. Cuanto más grande sea el proyecto en el que trabajas, más cierto será.

Recomendaría UI Stencils si desea acelerar este paso 🙂

Además, puede hacerlo directamente en su computadora usando una de las herramientas que puede encontrar en la web (es decir, las 20 mejores herramientas de armado de alambre). Todavía recomendaría hacerlo en un pedazo de papel: es más rápido y más fácil, pero no podrás compartir tus prototipos fácilmente.

2. No te repitas

Aquí la idea básica es simple: intente guardar y reutilizar las cosas que ha hecho . Es más un tipo de filosofía y mejores prácticas que específicas y de herramientas.

En primer lugar, necesita un archivo HTML básico con elementos comunes que está acostumbrado a poner. HTML5 Boilterplate, ya que llaman “la plantilla de front-end más popular de la web” ¡lo está haciendo bastante bien! Lo que puede hacer es descargarlo, tomar y eliminar lo que quiera y crear su propia plantilla HTML. Puedes hacer lo mismo para el archivo principal de CSS, hablaré de esto más adelante.

También puede usar la misma lógica DRY en un nivel más “específico”, puede reutilizar diferentes elementos que ya diseñó. Así es como lo estoy haciendo:

1. Al desarrollar algunos proyectos, trato de diseñar cada elemento como un “módulo” único que podría reutilizarse en otro proyecto más adelante. Evito usar #ids, me atengo a la semántica, uso varias clases en mis elementos para que sea fácilmente personalizable.
2. Una vez cada varios meses reviso los últimos proyectos que he estado haciendo y archivo lo que creo que podría reutilizar.
3. Estoy organizando cada elemento que encontré útil utilizando un conjunto de reglas para poder encontrarlas fácilmente más adelante.
4. Convierto estos elementos en fragmentos de texto sublimes si los estoy usando con bastante frecuencia.

Además, le recomiendo encarecidamente que eche un vistazo a la Arquitectura escalable y modular para CSS, que le enseñará cómo construir CSS modular (de lo que estoy hablando en 1).

3. Encuentre las herramientas adecuadas que se ajusten a sus necesidades.

• HTML

Desde lejos, recomendaría a Emmet, que es un increíble complemento que acelera la escritura HTML y es totalmente personalizable.

• CSS

Dependiendo de sus necesidades, usar un marco CSS podría ser una buena idea.
(Aquí hay una lista: 20 excepcionales placas de calderas CSS y marcos). Algunos de ellos están diseñados para ser personalizados fácilmente y puedes descargar algunos temas personalizados que agregarás sobre ellos (Google es tu amigo, encontrarás muchos).

De lo contrario, puede crear su propio marco . Así es como lo hice:

1. Creé un archivo main.css que solo se importa desde otros archivos / bibliotecas css. También puse todos mis derechos de autor en él.
2. Dividí diferentes funcionalidades en diferentes archivos:
• Los restablecimientos de CSS, normalizan … (Haga que los navegadores representen todos los elementos de manera más consistente, el “Reinicio de CSS” 2 de Eric Meyer, el Reinicio de CSS – Biblioteca YUI)
• Estilos tipográficos
• Estilos de diseño (eche un vistazo a 17 Minimal CSS Frameworks / Grid Systems para desarrolladores web)
• Formas de estilos
• Estilos de módulos (componentes específicos de su proyecto)

Uso ambas opciones dependiendo de qué tan grande y específico sea mi proyecto.

Otra herramienta impresionante es el pre-procesador CSS . Mejora el CSS y lo convierte en SASS, MENOS, que es bastante CSS con características adicionales como variables, anidamiento, mixins … ¡No se necesita mucho tiempo para aprender, así que vale la pena echarle un vistazo! Aquí se muestran los sitios web de hojas de estilo Syntactically Awesome (SASS) y Less.js.

• Javascript

No soy un experto en Javascript (¡todavía!), Así que no hablaré mucho sobre eso, tal vez edite mi publicación más tarde

Nunca he usado CoffeeScript, pero es casi lo mismo que LESS / SASS, te ayuda a escribir Javascript más rápido al proporcionar un pseudo-lenguaje inteligente que el compilador convertirá en Javascript.

Se sabe que Javascript tiene muchas bibliotecas (¡como muchas!), JavaScript es el lenguaje que más se usa en Github. Por lo tanto, si lo busca en Google, puede encontrar una biblioteca sobre lo que necesita. Solo encuentra la palabra clave correcta.

Si está trabajando en una aplicación de una sola página, SPA , (también llamada RIA ), hay algunas herramientas muy poderosas que se han lanzado en los últimos años (consulte MEAN IO). Estas herramientas son muy poderosas, pero se necesita mucho tiempo para dominarlas, asegúrate de que valga la pena dedicar tiempo a comenzar a aprenderlas (puede ser largo pero bastante fácil porque estas técnicas están muy bien documentadas).

• Herramientas de linea de comando

Si no tiene miedo acerca de la línea de comando, bueno, señor, ¡pronto será feliz! (y productivo).

– Yeoman, la herramienta de andamiaje de la web para aplicaciones web modernas le ayuda a configurar muy rápidamente un proyecto a gran escala (en su mayoría basado en JavaScript).

– Bower es un administrador de dependencias para aplicaciones frontend. Administra cualquier biblioteca que necesite en su proyecto y la mantiene actualizada.

– Grunt.js, el JavaScript Task Runner, automatiza la mayoría de las tareas de javascript que se requieren para poner una aplicación web en línea (limpiar código, buscar errores, ejecutar pruebas unitarias, compilar ect de CoffeeScript, etc.)

• Editor de texto

Por último, pero no menos importante, el editor de texto es la herramienta que más utilizará, por lo que debe encontrar una que satisfaga sus necesidades.

Uno que está muy bien hecho y diseñado para diseñadores de páginas web es Brackets, el editor de código de código abierto y gratuito para la Web. Es muy bueno para el diseño web y los desarrolladores lo están mejorando bastante a menudo.

Mi favorito es Sublime Text, “El editor de texto del que te enamorarás”.
Es potente, personalizable, tiene muchos complementos y muchas características y es simple.

No puedo terminar sin hablar del famoso http://www.vim.org, que es impresionante pero necesita mucho tiempo de aprendizaje.

4. Elabore un flujo de trabajo, apéguese a él, mejore.

Una vez que haya encontrado un flujo de trabajo y un conjunto de herramientas con las que se sienta bien, intente mantener ese flujo de trabajo. Si hay algo que no te gusta, arréglalo, incluso si estás trabajando en otra cosa (¡asegúrate de que no te lleve todo el día!).

Siempre encontrarás algo para mejorar, pero no te preocupes tanto o perderás mucho tiempo

–

Espero que les guste esta respuesta, avísenme si puedo mejorarla de alguna manera.

Answer 2

Primero dibuja unos diagramas que muestren lo que quieres construir. Recomiendo encarecidamente sacar primero el lápiz y el papel y dibujar diagramas de interacción básicos que muestren al usuario y los diversos párrafos de su proyecto y cómo se conectan.

Digamos que estás construyendo un formulario de contacto. El usuario deberá ingresar datos en varios campos de formulario y luego hacer clic en el botón enviar. El formulario debe, idealmente, validar el contenido de cada uno de esos campos y mostrar cualquier error de entrada de forma agradable. Si no hay errores, el formulario debe enviar los datos al servidor. El servidor también debe validar los datos, asegurarse de que provengan de la forma correcta y de que los datos en los campos tengan sentido, y luego decidir qué hacer con esos datos; tal vez guárdelo en una base de datos, o envíelo por correo electrónico a alguien.

Una vez que haya resuelto exactamente qué comportamientos debe admitir la página, dibuje diagramas alámbricos, simples planos que muestren lo que irá en cada lugar de la página. ¿Utilizará casillas de verificación o un menú de selección? ¿En qué orden entrarán los campos del formulario, cómo funcionará en un dispositivo de pantalla pequeña como un teléfono?

A continuación, elija una plataforma de interfaz de usuario. Los más populares incluyen Bootstrap by Twitter y la Fundación Zurb. También hay jQueryUI. ¿Necesita mesas de lujo con clasificación y filtrado? Utilice el complemento Datatables. ¿Necesita validación de formulario? Utilice el complemento jQuery Validator.

Acostúmbrate a usar SASS y Less para crear CSS modular. Mira cómo lo hacen Boostrap y Zurb y aprende de ellos.

Use sistemas de lenguaje temporal como Slim o Jade en lugar de codificar manualmente HTML. ¿Construyendo un sitio web estático? Use generadores de sitio como nanoc o Middleman si conoce a Ruby. Use Express o Sails si conoce NodeJS. ¿Construyendo un sitio dinámico con una base de datos backend? Utilice Ruby on Rails o Sails.JS.

Preguntas específicas de Google (por ejemplo, ¿cómo envío un correo electrónico con formato utilizando NodeJS, o cómo escribo datos en Postgress utilizando Ruby, ese tipo de cosas)

Evita las herramientas gráficas del sitio web Usa un editor de texto y un terminal.

Mire otros sitios web y vea la fuente para ver cómo hacen cosas específicas.

Haga preguntas sobre Stackoverflow.

Answer 3

D3.js – Data-Driven Documents es una biblioteca de JavaScript muy funcional para manipular documentos, que también permite un gran control del resultado final. Es fácil de aprender, la documentación es excelente y hay cientos de ejemplos para aprender.

Puedes ahorrar mucho tiempo usando esta biblioteca. Por ejemplo (tomado de su sitio), para cambiar el color del texto normalmente, necesitaría un bucle –

var paragraphs = document.getElementsByTagName("p");for (var i = 0; i < paragraphs.length; i++) { var paragraph = paragraphs.item(i); paragraph.style.setProperty("color", "white", null); }

Usando D3, esto se puede hacer en una línea -

d3.selectAll("p").style("color", "white");

Incluso proporcionan funciones para decodificar fácilmente sus datos JSON o CSV.

Answer 4

Sea menos dependiente de las plantillas y escriba su propio código con más frecuencia. Ejecute la herramienta de velocidad de página de Google para verificar si hay algún problema.

Combina archivos JavaScript y CSS para reducir las solicitudes HTTP.

Bibliotecas CSS gratuitas: CSS define el aspecto de la presentación del sitio, como la composición, el estilo, la tipografía, el color, etc., lo que le da una perspectiva única. Las bibliotecas de código abierto son de uso gratuito, pero no debes confiar en ellas y, a menudo, codificar tus propios estilos desde cero. Simplemente no digas SI a todo.

Use algunas herramientas: Workflowy, Trello, Dreamweaver, Writemaps, etc.

Incluso puede ver algunos de los blogs / noticias semanales para el desarrollo de aplicaciones para usuario como HTML5 Weekly, JavaScript Weekly, CSS Weekly, CSS Tricks y mucho más.

Incluso tiene la opción de contratar una empresa de desarrollo web con experiencia adecuada en desarrollo de front-end que ofrece su experiencia en desarrollo personalizado.

Answer 5

Pruebe Yeoman: la herramienta de andamiaje web para aplicaciones web modernas

Scaffolding Wizard que configura tu proyecto tan rápidamente …

Aquí hay algunos consejos si quieres comenzar a aprender Angular:
Así que quieres aprender AngularJS

Answer 6

1. Use herramientas como Dreamweaver con soporte tanto para el diseño como para la vista de código.
2. Mantenga una plantilla CSS HTML existente como base para nuevos proyectos. Le ahorrará tiempo al proporcionarle los contenedores para los elementos CSS requeridos, y también resultará en convenciones de nomenclatura estándar para todas las interfaces de usuario que diseñe.
3. JS: No codifique, use las bibliotecas de estantes como jquery, js extendido, angular js o node.js