¿Qué aplicaciones puedo intentar construir cuando estoy aprendiendo JavaScript? Quiero aprender construyendo.

Excelente pregunta!

Permíteme presentarte el equivalente de la comunidad javascript del omnipresente Hello World. Esto es TodoMvc. Haga clic en cualquiera de los diversos enlaces del marco para ver … bueno, casi exactamente lo mismo en cada uno. Es una aplicación de tareas muy simple en el navegador. Muchos marcos crean una implementación de esta aplicación muy simple para demostrar cómo se pueden estructurar las actividades comunes que usan ese marco.

Comience haciendo clic y escribiendo (en realidad escriba, no solo tome notas mentales) las características que deben tener estas aplicaciones. Ahora lo vas a crear tú mismo.

Comience creando una aplicación que tenga todas esas características usando Javascript básico. No use el DOM o HTML en absoluto. Utilice NodeJs o simplemente abra la consola javascript en Google Chrome e interactúe con ella allí. Use console.log() para generar su lista de todos. Luego, cree funciones para interactuar con su aplicación de tareas que puede llamar desde la consola. Por ejemplo (y siéntase libre de cambiar esto dependiendo de las características que considere más importantes), hágalo para que pueda interactuar con la aplicación escribiendo lo siguiente en la consola

// agrega un todo a tu lista. Lo correlaciona con una identificación (esto puede ser solo un número creciente) y lo devuelve
todoApp.add (“obtener un poco de leche”);
// dada la identificación de un todo, elimínelo
todoApp.remove (123);
// dada la identificación de un todo, alternar si se ha completado o no. Lanza un error si no existe una tarea con esa identificación
todoApp.toggle (123);
// imprime todos los todos, su id, mensaje, y si están completos o no
todoApp.showTodos ();
// imprime todos los no completados y sus identificadores
todoApp.showTodos ({completado: falso});
// imprime todos los completados y sus identificadores
todoApp.showTodos ({completado: verdadero});
// eliminar todos los completados
todoApp.clearCompleted ();

Sugerencia: puede hacer que cualquier función esté disponible en la consola de Chrome al agregarla al objeto de window :

(() => {
// esta función no estará disponible desde la consola
const showMessage = (mensaje) => {
console.log (`Mensaje recibido: $ {msg}`);
};
// esta función estará disponible desde la consola
window.sayHi = (toWhom) => {
showMessage (`hola, $ {toWhom});
};
}) (); // Esto se llama una expresión de función invocada inmediatamente (IIFE)
// si no lo sabes. Aprende sobre eso. Es muy importante

Dependiendo de qué tan avanzado esté, debe esperar que esto lleve entre 2 y 25 horas de investigación y trabajo. Cuando haya terminado y funcione, dedique algo de tiempo a arreglar las cosas; imagine que a un loco loco se le asigna en algún momento la tarea de realizar modificaciones en su código, hacer las cosas lo más fáciles posible para que no sientan la necesidad para rastrearlo.

Ahora, deja de lado tu ego y publícalo en el sitio de StackExchange CodeReview. La gente lo va a destrozar. Está bien, aprenderás cosas valiosas.

¿Hecho? Ok, genial

Ahora hagámoslo de nuevo, excepto que esta vez use DOM y HTML para que sus todos aparezcan en la página, agregue todos con un formulario y alterne / elimine cosas con botones. El uso de JQuery está permitido pero probablemente no es estrictamente necesario ya que la mayoría de los navegadores modernos tienen API más o menos equivalentes. Intenta evitar mirar a escondidas en los tutoriales. No te preocupes por hacer las cosas bonitas: solo haz un estilo básico en blanco y negro, no querrás ir por un agujero de conejo css todavía.

¿Terminado? Genial, publíquelo nuevamente en el CR stackexchange.

Ok, ahora comencemos a aprender frameworks. Comience con uno antiguo pero simple: BackboneJs. Lea su documentación e implemente su aplicación de tareas usando Backbone. Nuevamente, evite los tutoriales tanto como sea posible (hay muchos sobre cómo hacer todos). Compare su solución con la implementación oficial. Y nuevamente, publíquelo para su revisión.

Ahora dale una oportunidad a AngularJs 1. Personalmente no me gusta, pero tiene muchos seguidores y es importante al menos conocer los conceptos básicos. Hay al menos dos grandes filosofías que puedes probar aquí. Puede crear una aplicación de tareas usando controladores de nivel superior, vistas e inclusiones, o puede hacer que la aplicación se base lo más posible en componentes y directivas. Pruebe ambos (aunque técnicamente este último es más “correcto”). Como siempre, ¡pida retroalimentación!

También podría considerar hacer esto con Aurelia, que tiene similitudes y diferencias importantes.

Haz ReactJs también mientras lo haces. Esto lo expondrá a otro paradigma de desarrollo de JavaScript (virtual-dom), así como a herramientas de transpilación. Definitivamente publique este. La gente va a tener tantas opiniones sobre lo que puede hacer mejor.

Pruebe también Angular 2 para tener una idea de lo que se trata el lenguaje transpiler Javascript. Utilice Typecript y su pila de desarrollo recomendada.

Pruebe también EmberJs para tener una idea del desarrollo en entornos javascript con CLI fuertes.

Siéntase libre de modificar su lista de funciones a medida que avanza para mantener las cosas interesantes, por ejemplo, tal vez agregue la capacidad de dividir todos en una serie de subtareas y cuando se completan, el padre se completa automáticamente.

Eventualmente (cuanto antes mejor, realmente, pero no se preocupe por eso hasta que se sienta realmente cómodo con js), querrá aprender un marco de prueba de unidad como Jasmine y un corredor de prueba como Karma.

Obviamente, también querrá crear otras aplicaciones para mejorar sus habilidades HTML, CSS y js más generales, pero esta debería ser una buena progresión que le brindará un fantástico recorrido por el mundo de Javascript. Si sigues con esto, trabajando constantemente en esto de 10 a 15 horas a la semana junto con tu autoestudio del libro, deberías poder completarlo en … ¿quizás 5 a 6 meses? En ese momento (y suponiendo que realmente haya escrito todo el código usted mismo y no haya hecho trampa copiando y pegando cosas que no entendió completamente) habrá tenido una visión lo suficientemente buena del mundo de JavaScript con la que debería poder trabajar Javascript profesionalmente en una capacidad de nivel jr.

Ah, y asegúrate de publicar todo en Github. Muchas personas están aterrorizadas de publicar sus experimentos allí. No se Como alguien que entrevista a un montón de desarrolladores, puedo decirte que nunca estoy mirando a Github para ver el código de calidad profesional de las personas. En cambio, estoy buscando un historial de lo que han estado aprendiendo y jugando.

De hecho, lo haré mejor, si * realmente * quieres ganar un poco de respeto en la comunidad, escribe todo el blog mientras aprendes con un mínimo de una publicación por semana. Al menos, lo sé para mí, esta sería una lectura fascinante y apuesto a que puede obtener cierta notoriedad al hacer esto de manera consistente que se traduciría en excelentes ofertas de trabajo.

Por cierto, si tiene preguntas que desea hacer a los desarrolladores profesionales de vez en cuando, puede intentar unirse a la sesión semanal VirtualBrownBag y la holgura allí. Estamos felices de ayudarlo.

Los juegos basados ​​en navegador son siempre divertidos. Podrías intentar construir un clásico como Connect Four o War, o algo más moderno como 2048.

Si construir un juego resulta demasiado desafiante, ¡no te preocupes! Esto solo significa que tienes más que aprender. Mientras tanto, intente agregar un poco de interactividad simple a un sitio personal usando JavaScript, o hacer una pequeña aplicación de tareas pendientes (no se preocupe por los datos persistentes, solo intente hacer algo que se vea bien y tenga alguna funcionalidad básica).

Plug descarado: si está buscando más ideas, la escuela que cofundé, Rithm School, lanzó recientemente algunos materiales gratuitos en línea de JavaScript. Puede encontrar más ejercicios e ideas de proyectos allí.

Free Code Camp tiene un montón de sugerencias de proyectos, recomiendo FCC para cualquier persona que intente practicar sus habilidades de JavaScript en proyectos. Algunos ejemplos incluyen:

  • Una aplicación meteorológica local
  • Una máquina de cotizaciones aleatorias
  • Un reloj pomodoro
  • Juego de tres en raya (la posibilidad de hacer un juego AI siempre es divertido)
  • Juego simon
  • Twitch widget usando la API JSON
  • Conway’s Game of Life con React.js
  • Visualización de datos con D3.js

Todos estos son proyectos muy divertidos. Ya sabía cómo usar React antes de comenzar FCC, así que he usado React para muchos de sus proyectos, lo que definitivamente ha acelerado el proceso.

Además, sugeriría que revise otros aspectos de JavaScript más allá del simple JS de vainilla. Hay mucho más que aprender, como jQuery, Node.js, WebGL, Three.js, TypeScript, Babel, React, JSX, Redux, y esas son solo algunas de las herramientas disponibles para los desarrolladores de JavaScript.

Estos 2 son lo que hice mientras aprendía JavaScript.
– Para aprender JavaScript y cómo usar JavaScript APIS
https://github.com/narutoadi/MyD
– Aprender Js y nodejs.
https://github.com/narutoadi/col

Intenta comenzar a crear aplicaciones pequeñas como una calculadora usando HTML y JavaScript.

A medida que construye su calculadora, intente agregar más funciones para que sea más y más compleja a medida que la construye.

Otra cosa interesante que puede hacer es un Editor de texto en línea que utiliza HTML y JavaScript (mejor si conoce CSS) que puede formatear texto como negrita, cursiva, agregar viñetas, etc.

Solo piense en todas las cosas geniales que desea crear y hágalo en JavaScript.

Algunas aplicaciones amigables para principiantes para construir que lo ayudarían a comprender los conceptos son:

  • Listas de todo
  • Juego de Tic Tac Toe
  • Clon de Instagram
  • Aplicación de chat.

Sobre todo, no me preocuparía por los detalles como iniciar sesión y guardar datos al principio. Haz lo primero que creas que eres capaz de hacer. Sigue agregándole a medida que aprendas.

Los Api de Google Maps están muy bien documentados y puedes crear muchas aplicaciones interesantes con ellos. Una vez que te sientas cómodo, échales un vistazo.

¡Buena suerte!

Una especie de aplicación de “hola mundo” en el mundo JS, utilizada para demostrar marcos y bibliotecas, es un administrador de lista de tareas pendientes.

No es trivial, pero lo suficientemente simple como para codificarse sin demasiado código.

Ver TodoMVC para algunas ideas.

Prueba jQuery Grid Plugin – jqGrid. Entonces habrás aprendido una aplicación bastante buena (bueno, parte de una), y habrás aprendido mucho Javascript (y jQuery).