Lenguaje JavaScript, ¡base sólida!
La idea del libro, es empezar desde cero y hacer un viaje juntos desde los abismos profundos de la duda, pasando por el pseudocódigo hasta llegar al maravilloso mundo de las llamadas Ajax, haciendo muchas paradas en el camino, en las que aprenderemos todo lo que necesitas para empezar tu aventura como desarrollador Front-end con sólidas bases en JavaScript
¿Qué necesito saber antes de empezar?
No es necesario tener experiencia programando, pero si que es importante tener claro el contexto de cómo se hacen páginas web estáticas, ya que en la parte III nos centraremos en la manipulación dinámica del DOM y las llamadas AJAX. No me extenderé mucho acerca de HTML y CSS, por lo que espero que ya tengáis cierto conocimiento adquirido. Aunque vuestro nivel de conocimientos y experiencias relativamente bajo, hemos procurado evitar que esto sea un freno a tu aprendizaje en JavaScript. Si tienes experiencia en otros lenguajes de programación, jugarás con ventaja al principio, pero no te confíes… Si ya has trabajado con J Query hablaremos de cómo hacer todo lo que haces con Java Script en los últimos capítulos.
No es necesario tener experiencia programando, pero si que es importante tener claro el contexto de cómo se hacen páginas web estáticas, ya que en la parte III nos centraremos en la manipulación dinámica del DOM y las llamadas AJAX. No me extenderé mucho acerca de HTML y CSS, por lo que espero que ya tengáis cierto conocimiento adquirido. Aunque vuestro nivel de conocimientos y experiencias relativamente bajo, hemos procurado evitar que esto sea un freno a tu aprendizaje en JavaScript. Si tienes experiencia en otros lenguajes de programación, jugarás con ventaja al principio, pero no te confíes… Si ya has trabajado con J Query hablaremos de cómo hacer todo lo que haces con Java Script en los últimos capítulos.
¿Qué aprenderemos?
• Pseudocódigo.
• A pensar como un programador.
• Trabajar fluidamente con funciones.
• Dominar las bases de JavaScript (estructuras del lenguaje).
• Ajax y sus peticiones.
• Manipulación dinámica del DOM.
¿Qué no aprenderemos?
JavaScript es un universo inmenso que va creciendo a pasos agigantados con expansiones.
Recuerda que la idea es sentar las bases del lenguaje, por lo que no veremos cosas como:
Bases de datos
Ya sean SQL o NoSQL, es algo que no pretendemos tratar en este libro. Paradigmas POO, Funcional, etc…)
Hablaremos de pasada de algunos conceptos interesantes
de los diversos paradigmas que ofrece JavaScript, pero no
iremos más allá.
HTML5 APIs
Aunque hablaremos de pasada sobre cosas tan potentes como Local Storage, queda muy lejos de las bases de Java Script obre las que queremos centrarnos.
Regex (Expresiones Regulares)
Es algo muy útil en el día a día, y será mencionado, pero solo por encima para entender cómo enfrentar nos a ello como desarrolladores noveles.
Convenciones utilizadas en este libro
Ejecuta el código
Todos los ejemplos de código que veras en el libro tienen significado por si mismos y pueden ser ejecutados en la consola del navegador sin problema alguno, es más, os lo recomendamos encarecidamente.
JavaScript de hace 10 minutos
Voy a contarte una historia que narra el sacrificio y la lucha diaria de un grupo inmenso de personas por todo el mundo que creyeron, que una ide a tan genial como interconectar ordenadores podría llegar a ser la mejor forma de compartir el conocimiento de la humanidad, convirtiendo Internet en una maravillosa y muy valiosa herramienta para la humanidad. Para llegar asta donde estamos hoy… mucha sangre de unicornio se ha derramado. Ya hora nos pondremos serios para hablar de nuestra industria.
La historia de nuestra industria
Lecturas recomendadas:
• History of the Internet by Melih Bilgil
• What is the Internet? By Code.org
La Evolución de la web desarrollada por el equipo de Google Chrome es un portal que nos permite visualizar los hitos más importantes en la historia de la web desde 1991 hasta 2013
1991-1993
Los primeros años de la web pasan en mucha calma. Se crea HTTP y HTML1 dando el pistoletazo de salida para que empezara el mundo web. El primer navegador web gráfico, Mosaic.
1994-1995
Surgen los tres navegadores principales de la época; Netscape Navigator, Opera e Internet Explorer. Se oficializa HTML2 y rápidamente es sustituido por HTML3. Por primera vez se pueden usar cookies, pero aún estábamos muy lejos de tener que poner disclaimers, claro que por aquel entonces, internet era mucho más salvaje y menos regulado. En un intento firme para hacer la web más segura, y permitir cosas tan futuristas por aquel entonces como el comercio electrónico, se implementa la capa SSL y asi se crea el HTTPS, IMAPS,POP3S,SMTPS,FTPS,etc…
de los diversos paradigmas que ofrece JavaScript, pero no
iremos más allá.
HTML5 APIs
Aunque hablaremos de pasada sobre cosas tan potentes como Local Storage, queda muy lejos de las bases de Java Script obre las que queremos centrarnos.
Regex (Expresiones Regulares)
Es algo muy útil en el día a día, y será mencionado, pero solo por encima para entender cómo enfrentar nos a ello como desarrolladores noveles.
Convenciones utilizadas en este libro
Ejecuta el código
Todos los ejemplos de código que veras en el libro tienen significado por si mismos y pueden ser ejecutados en la consola del navegador sin problema alguno, es más, os lo recomendamos encarecidamente.
JavaScript de hace 10 minutos
Voy a contarte una historia que narra el sacrificio y la lucha diaria de un grupo inmenso de personas por todo el mundo que creyeron, que una ide a tan genial como interconectar ordenadores podría llegar a ser la mejor forma de compartir el conocimiento de la humanidad, convirtiendo Internet en una maravillosa y muy valiosa herramienta para la humanidad. Para llegar asta donde estamos hoy… mucha sangre de unicornio se ha derramado. Ya hora nos pondremos serios para hablar de nuestra industria.
La historia de nuestra industria
Lecturas recomendadas:
• History of the Internet by Melih Bilgil
• What is the Internet? By Code.org
La Evolución de la web desarrollada por el equipo de Google Chrome es un portal que nos permite visualizar los hitos más importantes en la historia de la web desde 1991 hasta 2013
1991-1993
Los primeros años de la web pasan en mucha calma. Se crea HTTP y HTML1 dando el pistoletazo de salida para que empezara el mundo web. El primer navegador web gráfico, Mosaic.
1994-1995
Surgen los tres navegadores principales de la época; Netscape Navigator, Opera e Internet Explorer. Se oficializa HTML2 y rápidamente es sustituido por HTML3. Por primera vez se pueden usar cookies, pero aún estábamos muy lejos de tener que poner disclaimers, claro que por aquel entonces, internet era mucho más salvaje y menos regulado. En un intento firme para hacer la web más segura, y permitir cosas tan futuristas por aquel entonces como el comercio electrónico, se implementa la capa SSL y asi se crea el HTTPS, IMAPS,POP3S,SMTPS,FTPS,etc…
Corría el año 1995, cuando Brendan Eich creo Mocha, a petición de Netscape con la idea de tener algún lenguaje de programación disponible en la web (lado de cliente). Luego se renombraría como LiveScript, para finalmente ser JavaScript. Una estrategia de marketing dudosa, que sigue hoy en día sembrando dudas planteando que Java y JavaScript son cercanos o iguales, lo que es completamente falso. Además a lo largo de ese año, comienza una escalada de problemas para todos los desarrolladores del mundo, conocido como “Browser Wars” que hasta hoy en día, seguimos sufriendo sus efectos.
Básicamente, cada navegador decide hacer las implementaciones de los distintos componentes que vendrán en los años venideros de manera diferente, lo que obligaba a los web masters a tener que hacer su código compatible para todos los navegadores al mismo tiempo, replicando esfuerzos y entorpeciendo el trabajo diario. Si a esto le sumamos que por aquel entonces los navegadores no se auto actualizaban, llegamos así a una situación realmente compleja ya típica que podría haberse evitado… pero por aquel entonces Internet era tan solo un producto novedoso con el que no se sabía muy bien como se monetizaría nada.
Para intentar recordar un poco como era navegar entonces, algunos nostálgicos recordarán la usabilidad de la web en aquella época, con contadores de visitas, gifs animados, fotografías pixeladas y mezclas de color únicas. Era la infancia de la web, y aún se puede recordar en sitios como The world’s Worst Website Ever.
1996-1998
Arrancó esta época con un número inicial de usuarios de 100 millones, para terminar con 183,91millones. Internet Explorer introduce una nueva etiqueta html iframe, que permite la carga de una página web dentro de otra.
En esta época, todavía se maquetaban las páginas web dentro de tablas. Conceptos como hojas de estilos estaban muy lejos de ser viables. Van surgiendo tecnologías claves para suplir carencias básicas de interacción, interconectividad y visualización. En esta época surgen tecnologías como los Applets de Java, Flash, etc…
1996-1998
Arrancó esta época con un número inicial de usuarios de 100 millones, para terminar con 183,91millones. Internet Explorer introduce una nueva etiqueta html iframe, que permite la carga de una página web dentro de otra.
En esta época, todavía se maquetaban las páginas web dentro de tablas. Conceptos como hojas de estilos estaban muy lejos de ser viables. Van surgiendo tecnologías claves para suplir carencias básicas de interacción, interconectividad y visualización. En esta época surgen tecnologías como los Applets de Java, Flash, etc…
XML se convierte en el formato de intercambio de datos más extendido. Encuanto a HTML,sigue evolucionando, pasando rápidamente a la versión 3.1 y 4, permitiendo la separación de la parte visual con CSS2. Por primera vez contenido y disposición gráfica de la información se separan. Empieza la era dorada de Flash. Por el momento CSS solo es un chiste comparado con las capacidades de Flash.
Mosaic muere en su versión 2.1, Internet empieza a ser un mercado potencial. Secreanlos primitivos sitios web de Google, Yahoo!, Altavista y Amazon.
Web Archive:
• GooglePrototipoen1998
• GoogleBetaen1998
• Amazonen1998
1999-2007
Fueron tiempos locos… con el cambio de siglo, Internet se consolido creando la famosa “Burbuja punto COM” que empezó a cocinarse en torno a 1997, pero que termino de explotar en2001-2002. Sobrevivimos al efecto 2000, con 305,09 millones de usuarios. Internet Explorer introduce ActiveX en la web. Se introducen los primero borradores de Ajax. En 2006 se introduce en los navegadores XML HTTP Request 2 y empieza la navegación asíncrona, lo que permite crear webs realmente dinámicas, que no necesitan una gran renderización en ella do del servidor.
Mosaic muere en su versión 2.1, Internet empieza a ser un mercado potencial. Secreanlos primitivos sitios web de Google, Yahoo!, Altavista y Amazon.
Web Archive:
• GooglePrototipoen1998
• GoogleBetaen1998
• Amazonen1998
1999-2007
Fueron tiempos locos… con el cambio de siglo, Internet se consolido creando la famosa “Burbuja punto COM” que empezó a cocinarse en torno a 1997, pero que termino de explotar en2001-2002. Sobrevivimos al efecto 2000, con 305,09 millones de usuarios. Internet Explorer introduce ActiveX en la web. Se introducen los primero borradores de Ajax. En 2006 se introduce en los navegadores XML HTTP Request 2 y empieza la navegación asíncrona, lo que permite crear webs realmente dinámicas, que no necesitan una gran renderización en ella do del servidor.
Esto hace posible la mejora en el desarrollo de las primeras plataformas de redes sociales (Web2.0).Poco a poco en esta época, el peso de Java Script va creciendo, ya que gran parte del procesamiento pronto se hará en ella do del cliente. En la parte más visual se empieza a introducir de manera experimental conceptos como SVG y Canvas. Aparecen en escena Facebook, Twitter, Linkedin, Youtube, etc… creando el embrión de lo que luego serían otras redes sociales. Aparece JQuery, una librería para Java Script que cambió para siempre la forma de interactuar entre Java Script y HTML/CSS. En los años venideros, muchos maquetadores utilizarán esta librería como puerta de entrada a JavaScript.
La época dorada del PHP (pre-Wordpress), como motor de innovación para la web con proyectos como PHPBB, llegará a su fin. Con la llegada de Wordpress (2003), Joomla(2005),etc… la web sufrirá en años sucesivos un cambio drástico. Los proyectos se dividirán en aquellos que puedan ser realizados conun CMS(principalmente en PHP) y otros que necesitarán de un trabajo a medida. El mítico Netscape se despide para siempre con la versión 9 y nace Firefox. Termina 2007 con 1.500 millones de usuarios en Internet.
2008 en a delante…
Empieza una nueva era… lo nativo va poco a poco desterrando las soluciones arcaicas y obsoletas como Applets,Flash,ActiveX… HTML5 y CSS3 dan el empujón que hacía falta para que la web despegara. Chrome nace usto aprovechando estos cambios de paradigma. Todo aquello que podía hacerse con Flash, ahora podrá hacer se mejor y más rápido de manera nativa juntando las tres fuerzas más imponentes de la web,CSS3,HTML5 y JavaS cript. Se abre el desarrollo hacia una web mucho más semántica con filosofías responsive, y empieza la era del “Internet en la palma de la ma no” con los smartphones.
La época dorada del PHP (pre-Wordpress), como motor de innovación para la web con proyectos como PHPBB, llegará a su fin. Con la llegada de Wordpress (2003), Joomla(2005),etc… la web sufrirá en años sucesivos un cambio drástico. Los proyectos se dividirán en aquellos que puedan ser realizados conun CMS(principalmente en PHP) y otros que necesitarán de un trabajo a medida. El mítico Netscape se despide para siempre con la versión 9 y nace Firefox. Termina 2007 con 1.500 millones de usuarios en Internet.
2008 en a delante…
Empieza una nueva era… lo nativo va poco a poco desterrando las soluciones arcaicas y obsoletas como Applets,Flash,ActiveX… HTML5 y CSS3 dan el empujón que hacía falta para que la web despegara. Chrome nace usto aprovechando estos cambios de paradigma. Todo aquello que podía hacerse con Flash, ahora podrá hacer se mejor y más rápido de manera nativa juntando las tres fuerzas más imponentes de la web,CSS3,HTML5 y JavaS cript. Se abre el desarrollo hacia una web mucho más semántica con filosofías responsive, y empieza la era del “Internet en la palma de la ma no” con los smartphones.
La popularidad y capacidad de la nueva Internet ocasionarán un cambio de paradigma que trastocará todo. Poco a poco, las aplicaciones de escritorio serán sustituidas por aplicaciones web, ocasionando una migración masiva de desarrolladores hacia el trio de la web (HTML,CSSyJavaScript). A lo largo de los años siguientes, serán muchas las empresas que decidan dar soporte a JavaScript en sus productos para asegurarse acceder a una masa crítica de programadores, este es el caso de los scripts para Photoshop, Unity, etc…
También veremos que la complejidad de conseguir desarrolladores de APPs Nativas(Java, Swifty Objetive-c)forzar á a que lleguen los sistemas híbridos, donde JavaScript, HTML y CSS serán todo el conocimiento necesario para entrar en el mundo de los Smartphone, gracias a soluciones como Phone Gap. La fiebre por extender JavaScript, irá mucho más allá de lo imaginado y encontrará en Node.js la pieza que faltaba para encajar en ciertos entornos como las aplicaciones de escritorio, ola gestión de redes. Todo ello, permite que Java Script deje de ser un lenguaje exclusivo de la web para ir mucho más allá, adentrándose incluso en el desarrollo del Internet of Things (IoT) y la Robótica con libreríascomoCyclon.js,J5,etc…
Internet de alta velocidad y la fibra óptica supusieron una gran mejora en las comunicaciones, lo que ayudó a crear una Internet mucho más rica en contenido. En 2011 ya se manejaban 27.483PB / mes, frentealos 10.000PB/ mes de 2007. La logística y las telecomunicaciones jugarán un papel importantísimo en el futuro desarrollo de nuestro planeta.
El largo camino del Developer
Este esquemático mapa mental, puede ayudaros a visualizar lo que está ocurriendo hoyen día en la web, y comprender como los profesionales de la industria, hemos ido migrando de nombres y funciones hasta donde estamos ahora mismo, que no es definitivo y lógicamente seguirá evolucionando.
Una historia de evolución
Muy lejos quedan los tiempos en los que ser Web master era suficiente para gestionar todo lo que tenia que ver con la web, desde programación a gestión de los usuarios, pasando por el primitivo Marketing de la época. La web fue evolucionando rápidamente a nivel de desarrollo, aquel web master multiusos, paso a dividir se en dos grandes y muy diferencia dos roles:
Diseño
Encargado de hacer los diseños básicos con algún programa de la suit de Adobe o similar. En ocasiones también se encargaba de la parte de Flash, para crear animaciones y transiciones.
Programación
Realizaba todas las tareas de desarrollo: JavaScript, PHP, Bases de datos formularios, hosting,etc… Las webs de entonces no eran muy complejas, gran parte de la lógica se hacía en el servidor y el verdadero reto era lograr los objetivos con la tecnología de la época.
Aquellos eran los viejos tiempos… era como construirlos primeros aviones. Materiales como la tela y madera servían para construir todo el entramado del fuselaje, un motor potente, unos controles sencillos y ya estabas volando. A medida que la web fue evolucionando, su complejidad también creció exponencialmente, y como consecuencia inmediata, la programación se dividió en dos grandes áreas.
Diseñador/Maquetador
Antes con el diseño era suficiente. Pero poco a poco, el diseñador va asumiendo competencias básicas, para descargar de trabajo meramente estático a los programadores, que se centrarían en hacer la parte menos visual. Ahora el diseñador tomará la iniciativa y convertirálos diseños en HTML y CSS
Front-Enddeveloper
Algunos desarrolladores, deciden que asumirán las funciones de interacción detallado del cliente (JavaScript) y dejando el servidor. En muchas ocasiones, el di seño quedará fuera de sus competencias. A medida que JavaScript dejó de usarse solo para interpretación y empezó a ganar fuerza frente al renderizado total de datos en el servidor, se migrará de J Query hacia Java Script nativo y a las librerías MV* como Angular, Backbone, Ember…
Back-Enddeveloper
El desarrollo en el servidor también sufrirá muchos cambios. Poco a poco, se migrará de proyectos web que basan la mayor parte de su programación en el renderizado de HTML, CSS y JavaScript, desde el servidor a la creación de APIs, donde prima el aislamiento del procesamiento de la información.
El largo camino del Developer
Este esquemático mapa mental, puede ayudaros a visualizar lo que está ocurriendo hoyen día en la web, y comprender como los profesionales de la industria, hemos ido migrando de nombres y funciones hasta donde estamos ahora mismo, que no es definitivo y lógicamente seguirá evolucionando.
Una historia de evolución
Muy lejos quedan los tiempos en los que ser Web master era suficiente para gestionar todo lo que tenia que ver con la web, desde programación a gestión de los usuarios, pasando por el primitivo Marketing de la época. La web fue evolucionando rápidamente a nivel de desarrollo, aquel web master multiusos, paso a dividir se en dos grandes y muy diferencia dos roles:
Diseño
Encargado de hacer los diseños básicos con algún programa de la suit de Adobe o similar. En ocasiones también se encargaba de la parte de Flash, para crear animaciones y transiciones.
Programación
Realizaba todas las tareas de desarrollo: JavaScript, PHP, Bases de datos formularios, hosting,etc… Las webs de entonces no eran muy complejas, gran parte de la lógica se hacía en el servidor y el verdadero reto era lograr los objetivos con la tecnología de la época.
Aquellos eran los viejos tiempos… era como construirlos primeros aviones. Materiales como la tela y madera servían para construir todo el entramado del fuselaje, un motor potente, unos controles sencillos y ya estabas volando. A medida que la web fue evolucionando, su complejidad también creció exponencialmente, y como consecuencia inmediata, la programación se dividió en dos grandes áreas.
Diseñador/Maquetador
Antes con el diseño era suficiente. Pero poco a poco, el diseñador va asumiendo competencias básicas, para descargar de trabajo meramente estático a los programadores, que se centrarían en hacer la parte menos visual. Ahora el diseñador tomará la iniciativa y convertirálos diseños en HTML y CSS
Front-Enddeveloper
Algunos desarrolladores, deciden que asumirán las funciones de interacción detallado del cliente (JavaScript) y dejando el servidor. En muchas ocasiones, el di seño quedará fuera de sus competencias. A medida que JavaScript dejó de usarse solo para interpretación y empezó a ganar fuerza frente al renderizado total de datos en el servidor, se migrará de J Query hacia Java Script nativo y a las librerías MV* como Angular, Backbone, Ember…
Back-Enddeveloper
El desarrollo en el servidor también sufrirá muchos cambios. Poco a poco, se migrará de proyectos web que basan la mayor parte de su programación en el renderizado de HTML, CSS y JavaScript, desde el servidor a la creación de APIs, donde prima el aislamiento del procesamiento de la información.
En cuanto a lenguajes de programación, poco a poco se irá viendo que más y más sistemas y lenguajes se esforzarán por entrar en el mundo de internet con nuevas librerías y arquitecturas. Apache logra hacer de puente para muchos, pero a la larga surgirán alternativas. Mientras tanto, muchas iniciativas asaltan la web con ideas innovadoras como desarrollo ágil, extreme Programming (XP). El software libre acabó convirtiéndose en el standard dentro del sector gracias al mítico LAMP.
Las bases de datos también evolucionarán y tendremos que convivir con dos maneras de entender el almacenaje, SQL y No SQL. Lo que su pondrá una dificultad añadida para el desarrollo de nuevos proyectos. Otras áreas como la inteligencia artificial y Big data irán poco a poco demandando su hueco, por lo que dentro del back en diremos viendo nuevas áreas de especialización.
Full Stack Developer
Surge una nueva clase de desarrolladores, que por avatares del destino nos encasillan en el backo en el front. Y serán capaces de adentrarse en ambos mundos y suplir las necesidades de los equipos en estos dos frentes. Cada Full Stack Developer será diferente, cada uno será especialista en unas áreas, y en otras pasará de largo.
Mantenerse al día en la industria es cada vez más difícil. En cuestión de unos pocos años pasamos de construir aquellos aviones básicos con tela y madera a desarrollar cohetes capaces de surcar una galaxia. Nuestra industria se vio totalmente superada. El crecimiento de Internet no era ni del ejos acorde a la cantidad de profesiones capaces de suplir esta demanda.
Las bases de datos también evolucionarán y tendremos que convivir con dos maneras de entender el almacenaje, SQL y No SQL. Lo que su pondrá una dificultad añadida para el desarrollo de nuevos proyectos. Otras áreas como la inteligencia artificial y Big data irán poco a poco demandando su hueco, por lo que dentro del back en diremos viendo nuevas áreas de especialización.
Full Stack Developer
Surge una nueva clase de desarrolladores, que por avatares del destino nos encasillan en el backo en el front. Y serán capaces de adentrarse en ambos mundos y suplir las necesidades de los equipos en estos dos frentes. Cada Full Stack Developer será diferente, cada uno será especialista en unas áreas, y en otras pasará de largo.
Mantenerse al día en la industria es cada vez más difícil. En cuestión de unos pocos años pasamos de construir aquellos aviones básicos con tela y madera a desarrollar cohetes capaces de surcar una galaxia. Nuestra industria se vio totalmente superada. El crecimiento de Internet no era ni del ejos acorde a la cantidad de profesiones capaces de suplir esta demanda.
Esto creó un efecto llamada que desató la llegada de muchos nuevos desarrolladores, que no sienten esta profesión con la pasión de aquellos que empezamos a construir un Internet mejor, nosotros realmente creíamos en lo que hacíamos y como lo hacíamos. La asimilación de programadores obsoletos de otras áreas y ajenos a la industria, condicionar á mucho la manera de trabajar, especialmente con JavaScript. Básicamente podría decirse que esta industria se divide entre artesanos y mercenarios.
SIGUE APRENDIENDO DESCARGANDO EL ARCHIVO