└── JavaScript.md /JavaScript.md: -------------------------------------------------------------------------------- 1 | # JavaScript 2 | Para dominar JavaScript, el lenguaje más versátil y demandado de la actualidad, tienes que conocer sus herramientas, tales como librerías, frameworks, componentes, etc. 3 | 4 | ## Índice 5 | * [Herramientas](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#herramientas) 6 | * [Handlebars](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#handlebars) 7 | * [Ember](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#ember) 8 | * [Babel](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#babel) 9 | * [Browserify](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#browserify) 10 | * [Webpack](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#webpack) 11 | * [Vue](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#vue) 12 | * [React](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#react) 13 | * [Gulp](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#gulp) 14 | * [Grunt](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#grunt) 15 | * [Template](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#template) 16 | * [Autor](https://github.com/frontendchile/javascript/blob/master/JavaScript.md#autor) 17 | 18 | ## HerramientasJS 19 | 20 | ### Handlebars 21 | * **Categoría:** Sistema de plantillas 22 | * **Descripción:** Handlebars es una extensión de MustacheJS que tiene más prestaciones y mejor rendimiento. Es un sistema de plantillas que permite definir de manera muy sencilla una "plantilla" para datos que vas a mostrar en el navegador para ser más limpio y legible que el común método de concatenar cadenas de carácteres dentro de una matriz mientas recorres un objeto que acabas de recibir o crear del servidor. 23 | * **Competencia:** Mustache 24 | * **Enlaces** 25 | * **[HandlebarJS.com](http://handlebarsjs.com/ "handlebarsjs.com")** 26 | * **[Guía de ayuda 1](https://www.funcion13.com/aprendiendo-a-usar-handlebars-como-sistema-de-templates-en-jquery/ "funcion13.com")** 27 | * **[Guía de ayuda 2](http://blog.hostdime.com.co/que-es-handlebars-js-y-como-usarlo/ "blog.hostdime.com.co")** 28 | 29 | ### Ember 30 | * **Categoría:** Framework UI, SPA 31 | * **Descripción:** Ember.js es un framework JavaScript para crear aplicaciones web del lado del cliente (código abierto). Esta basado en la arquitectura modelo-vista-controlador (MVC). Esta catalogado como unos de los principales framework a en el mundo de JavaScript ya que permite a los desarrolladores crear aplicaciones de una sola pagina (single-page) escalables. 32 | * **Competencia:** Angular, Vue, Polymer, React, Backbone. 33 | * **Enlaces** 34 | * **[EmberJS.com](https://emberjs.com/ "emberjs.com")** 35 | * **[Guía de ayuda 1](http://codehero.co/ember-js-desde-cero-introduccion-e-instalacion/ "codehero.co")** 36 | * **[Guía de ayuda 2](https://www.adictosaltrabajo.com/tutoriales/primera-aplicacion-ember/ "adictosaltrabajo.com")** 37 | 38 | ### Babel 39 | * **Categoría:** Transcopilador 40 | * **Descripción:** Babel.js es un transcompilador que nos permite convertir nuestro código de JavaScript ES6 en código de ES5. Esta característica se esta convirtiendo en algo crítico para mucha gente ya que las nuevas características de ES6 hacen deseable trabajar con el lenguaje lo antes posible. Lamentablemente hoy en día en la mayor parte de los navegadores y distintas plataformas de JavaScript tienen un soporte parcial de ES6 . Vamos a introducir Babel.js y como nos ayuda a transformar nuestro código de ES6 a ES5. 41 | * **Competencia:** No aplica por el momento. 42 | * **Enlaces** 43 | * **[BabelJS.io](https://babeljs.io/ "babeljs.io")** 44 | * **[Guía de ayuda 1](https://abalozz.es/usa-las-nuevas-caracteristicas-de-javascript-hoy-mismo-con-babel/ "abalozz.es")** 45 | * **[Guía de ayuda 2](http://www.arquitecturajava.com/introduccion-babel-js-javascript-es6/ "arquitecturajava.com")** 46 | 47 | ### Browserify 48 | * **Categoría:** Dependencias/modulos 49 | * **Descripción:** Browserify es básicamente una herramienta que nos permite gestionar dependencias en forma de módulos del lado del cliente (en el navegador). A grandes rasgos podemos decir que lo que nos permite es crear y requerir módulos tal y como hacemos con Node.js; y digo a grandes rasgos porque no es exactamente así, ya que con browserify no tendremos en el build final varios ficheros javascript, sino que crearemos un bundle con la herramienta y tan solo tendremos un fichero javascript. 50 | * **Competencia:** Webpack. 51 | * **Enlaces** 52 | * **[Browserify.org](http://browserify.org/ "browserify.org")** 53 | * **[Guía de ayuda 1](http://www.nazariglez.com/2015/02/19/primeros-pasos-con-browserify/ "nazariglez.com")** 54 | 55 | ### Webpack 56 | * **Categoría:** Dependencias/modulos 57 | * **Descripción:** Webpack es un sistema de bundling para preparar el desarrollo de una aplicación web para producción. En cierta medida se puede considerar un Browserify avanzado ya que tiene muchas opciones de configuración. También se puede considerar una evolución de Grunt y Gulp, ya que permite de alguna manera automatizar los procesos principales que son transpilar y preprocesar código de .scss a .css, de ES7 a ES5/6, etc... 58 | * **Competencia:** Browserify. 59 | * **Enlaces** 60 | * **[Webpack.JS.org](https://webpack.js.org/ "webpack.js.org")** 61 | * **[Guía de ayuda 1](https://carlosazaustre.es/blog/primeros-pasos-con-webpack/ "carlosacaustre.es")** 62 | 63 | ### Vue 64 | * **Categoría:** Framework UI 65 | * **Descripción:** Vue es un framework JavaScript progresivo para la creación de interfaces de usuario. Vue.js añade data binding y reactividad a las aplicaciones web, destaca por ser ligero, flexible, tener una corta curva de aprendizaje y por adoptar lo mejor de los frameworks JavaScript más populares como son AngularJS y React. 66 | * **Competencia:** Angular, React 67 | * **Enlaces** 68 | * **[VueJS.org](http://vuejs.org/ "vuejs.org")** 69 | * **[Guía de ayuda 1](https://coligo.io/vuejs-the-basics/ "coligo.io")** 70 | * **[Guía de ayuda 2](https://laracasts.com/series/learn-vue-2-step-by-step "laracasts.com")** 71 | * **[Guía de ayuda 3](http://www.beerjs.cl/dic2016/#1 "beerjs.cl")** 72 | 73 | ### React 74 | * **Categoría:** Librería UI 75 | * **Descripción:** Es una biblioteca Javascript de código abierto para crear interfaces de usuario con el objetivo de animar al desarrollo de aplicaciones en una sola página. Es mantenido por Facebook, Instagram y una comunidad de desarrolladores independientes y compañías.React intenta ayudar a los desarrolladores a construir aplicaciones que usan datos que cambian todo el tiempo. Su objetivo es ser sencillo, declarativo y fácil de combinar. React sólo maneja la interfaz de usuario en una aplicación; está construida únicamente para utilizar el patrón de diseño modelo–vista–controlador (MVC), y puede ser utilizada conjuntamente con otras bibliotecas de Javascript o más grandes #MVC como AngularJS. También puede ser utilizado con las extensiones de React-based que se encargan de las partes no-UI (no gráficas) de una aplicación web. 76 | * **Competencia:** Angular, Vue 77 | * **Enlaces** 78 | * **[Facebook.github.io/react](https://facebook.github.io/react/ "facebook.github.io")** 79 | * **[Guía de ayuda 1](https://carlosazaustre.es/blog/empezando-con-react-js-y-ecmascript-6/ "carlosazaustre.es")** 80 | * **[Guía de ayuda 2](https://platzi.com/blog/intro-react-js/ "platzi.com")** 81 | 82 | ### Gulp 83 | * **Categoría:** Librería / Automatizador de tareas 84 | * **Descripción:** Gulp.js es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más. 85 | * **Competencia:** Grunt 86 | * **Enlaces** 87 | * **[GulpJS.com](http://gulpjs.com/ "gulpjs.com")** 88 | * **[Guía de ayuda 1](https://frontendlabs.io/1669--gulp-js-en-espanol-tutorial-basico-primeros-pasos-y-ejemplos "frontendlabs.io")** 89 | * **[Guía de ayuda 2](https://platzi.com/blog/automatizacion-gulp-js/ "platzi.com")** 90 | 91 | ### Grunt 92 | * **Categoría:** Librería / Automatizador de tareas 93 | * **Descripción:** Grunt.js es una librería JavaScript que nos permite configurar tareas automáticas y así ahorrarnos tiempo en nuestro desarrollo y despliegue de aplicaciones webs.Con un simple fichero JS que llamaremos Gruntfile, indicamos las tareas que queremos automatizar con un simple comando y las escribimos en él en formato JSON. 94 | * **Competencia:** Gulp 95 | * **Enlaces** 96 | * **[GruntJS.com](http://gruntjs.com/ "gruntjs.com")** 97 | * **[Guía de ayuda 1](https://carlosazaustre.es/blog/automatizar-tareas-en-javascript-con-grunt-js/ "carlosazaustre.es")** 98 | 99 | ## Template 100 | 101 | ### Componente A 102 | * **Categoría:** Automatizador, framework, librería, componente, paquete, etc. 103 | * **Descripción:** Este es una descripción corta del componente, porque para eso están los enlaces de más abajo, para ver la documentación completa de este. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique commodo magna a sagittis. Aliquam tortor libero, molestie quis efficitur nec, venenatis et lectus. Proin pellentesque, leo a interdum imperdiet, ipsum lectus volutpat nunc, at faucibus arcu ipsum ac arcu. 104 | * **Competencia:** Componente B (se pone la compentecia o el "parecido" a otro componente. Ejemplo: Gulp con Grunt) 105 | * **Enlaces** 106 | * **[Sitio.com](http://sitio.com/ "sitio.com")** 107 | * **[Guía de ayuda 1](https://frontend.io/ayuda-1 "frontend.io")** 108 | * **[Guía de ayuda 2](https://ejemplo.io/guia-para-empezar "ejemplo.io")** 109 | 110 | ## Pequeñas herramientas vBeta 111 | 112 | ### **[WowJS](http://mynameismatthieu.com/WOW/)** - Animations 113 | ### **[Waypoints](http://imakewebthings.com/waypoints/)** - Scroll 114 | ### **[ParallaxJS](http://matthew.wagerfield.com/parallax/)** - Parallax 115 | ### **[IntenseJS](http://tholman.com/intense-images/)** - Full Screen Images 116 | ### **[CountUpJS](https://github.com/fdograph/countUp.js)** - Numerical Data Animation 117 | ### **[CountUp jQuery](http://bfintal.github.io/Counter-Up/demo/demo.html)** - Numerical Data Animation 118 | ### **[PageJS](https://visionmedia.github.io/page.js/)** - Router 119 | ### **[ThreeJS](https://threejs.org/)** - 3D Animations 120 | ### **[Leaflet](http://leafletjs.com/)** - Maps 121 | ### **[HeadhesiveJS](https://markgoodyear.com/labs/headhesive/)** - Sticky Header 122 | ### **[Vivus](http://maxwellito.github.io/vivus/)** - SVG 123 | ### **[ScrollMagic](http://scrollmagic.io/)** - Scroll Animations 124 | ### **[PaceJS](http://github.hubspot.com/pace/docs/welcome/)** - Automatic page load progress bar 125 | 126 | ## Autor 127 | Comunidad FrontEnd Chile 128 | --------------------------------------------------------------------------------