JavaScript es sin duda uno de los lenguajes cuyo interés no ha disminuido con el pasar de los años y es que a día de hoy prácticamente toda la web está construida sobre este lenguaje. Que corra en el Front End como en el Back End es una de las características que te invita a pensar en sus posibilidades pero ¿Qué más hace a JS una excelente opción a la hora de aprender un lenguaje?
En HTML se pueden crear elementos personalizados custom elements. Por ejemplo podríamos crear el control <alert> que nos permita agregar una alerta que dure 10 segundos en la página o cualquier otro tipo de control que queramos.
Crear elementos personalizados nos permite encapsular funcionalidades complejas de la página web en elementos fácilmente reutilizables.
Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.
Primero respondemos a la pregunta ¿Qué es React? (también conocida como React.js o ReactJS) Es una librería Javascript de código abierto elaborada por un equipo de Facebook para la creación de interfaces de usuario. React se centra en la capa de visualización (en el modelo MVC), por lo que es una gran herramienta cuando se trabaja con data que cambia en tiempo real, dado que te permite actualizar la información sin necesidad de recargar la página completa.
Esta librería, es mantenida por el equipo de Facebook e Instagram y una comunidad de desarrolladores activa.
Ingeniería en Marketing
Community y Content Manager
{Team_Marketing_Desafío_Latam}
Primero que todo, ¿Qué es AngularJS? Según la wikipedia AngularJS o simplemente Angular, es un framework de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista “Whatever” (MVW), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.
En este tutorial abordaremos el tema de como trabajar con ES6 (Ecmascript 2015) directamente en Rails y dejar que Sprocket se haga cargo de transformar automáticamente los archivos javascript a ES5, el cual es compatible con la mayoría de los navegadores.
Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.
EcmaScript6, también conocido como Ecmascript2015 o ES2015, es el próximo standard de Javascript que, entre sus principales novedades, permite trabajar con clases, creación de constantes, interpolación de strings, entre muchas otras cosas más (http://es6-features.org/#Collation).
Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.
Hola, En este artículo vamos a desarrollar un reloj digital con HTML, CSS y Javascript. Para hacer el desarrollo necesitaremos un editor de texto como Sublime Text o Atom (ambos se pueden descargar gratuitamente) y para realizar las pruebas un navegador como Google Chrome o Firefox.
Aspirante a desarrollador web. Todo los días pienso en como mejorar el mundo, llevo 3 años de experiencia fracasando y volviéndome a levantar que me avalan. 1% inspiración 99% transpiración.
Es posible configurar el editor de texto «Sublime Text» para que este pueda correr directamente javascript en la consola.
Esto puede ayudar mucho a corregir errores en nuestros scripts o ayudar a practicar con algoritmos básicos a principiantes en programación.
Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.
En la web existen muchas recomendaciones acerca de que deben poner el javascript al final del sitio justo antes del cierre del </body>, la razón argumentada es sencilla, los navegadores leían secuencialmente los scripts y bloqueaban el render de la página hasta haberla leído el script, pero entonces ¿por qué razón Ruby on Rails, que supuestamente es construido por expertos carga javascript dentro de la etiqueta <head> </head> en lugar del cierre de la página?.
Hay 2 razones:
La primera es porque todos los navegadores modernos (incluyendo internet explorer 8) a partir del 2008 incorporaron un sistema llamado preload scanning que les permite cargar todos los scripts paralelamente sin causar bloqueos (bueno, realmente los bloqueos todavía existen, pero son parciales y ya ahondaremos más sobre como eliminarlos).
El segundo problema de agregar javascript al inicio consiste en que a veces alguna funcionalidad crítica de la página (o de tu negocio) depende de esos javascript, por ejemplo si pones google analytics al final, en el cierre del body y el usuario sale del sitio antes de terminar cargar la página entonces pierdes la data del usuario, otra de las funcionalidades críticas de Rails viene dada por jquery-ujs, si esto se cargara al final de la página tendríamos un problema con los usuarios que son del tipo Quicky Clicker y presionan el los links antes de que la página termine de cargar.
Preload Scanning no evita completamente el bloqueo, su implementación cambia dependiendo del navegador, pero en términos básicos consiste en un light weight process que se levanta para seguir leyendo archivos css, imágenes u otros scripts cuando se topa con un script. Pero esta lectura es sólo de forma parcial, por lo que sigue siendo recomendado en muchos casos poner javascript al final.
Otra forma de optimizar el proceso es ponerlo en el head junto con los atributos async o defer, este thread de stackoverflow es bastante aclarativo sobre las diferencias, sin embargo como todo lo asincrónico se recomienda implementar con cuidado.
Técnicamente el guideline oficial de google developers dice que debes evitar en lo posible bloquear, en otras palabras cargar javascript, si lo haces, hazlo al final, ocupa async y defer cuando puedas y si el script es pequeño, es mejor tenerlo dentro del html (esto último si que me lo esperaba) debido que al evitar el llamado disminuyes la latencia de los requests.
Nada de lo leído quiere decir que uno pueda poner en cualquier parte cualquier script, muchos de ellos tienen dependencias, otros necesitan el DOM cargado y como no están bien programados hay que agregarlos necesariamente al final, a fin de cuentas el preload scanning lo que lo logra es evitar que la lectura de un script de javascript bloquee la lectura del HTML.
si las funcionalidad es crítica en el head, sino en el cierre del body, si el javascript consiste sólo en un par de líneas puede ir inline para optimizar la carga.
Referencias:
http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/
http://railsapps.github.io/rails-javascript-include-external.html
http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup
https://developers.google.com/speed/docs/insights/BlockingJS
Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.
Estos son los apuntes de Coffescript de Arnoldo Rodriguez, uno de los profesores de DesafioLatam, en Monterrey, México, están muy buenos, especialmente si quieres recorrer de forma rápida todas las virtudes que tiene coffeescript.
# single line comment
###
multiline comment, perhaps a LICENSE.
###
# All variables are by default scoped locally
my_var = "Hello world"
pi = 3.1416
# Attach a variable to the global or window object to make it global
window.my_var = "Hello world"
# use the slim arrow to declare a function
func = -> "bar"
sumXtoTen = (x) ->
10 + x
# arguments are specified in parenthesis before the arrow
times = (a, b) -> a * b
# you can specify default arguments
times = (a = 10, b = 15) -> a * b
# use splats to receive N arguments via an array
sum = (nums...) ->
result = 0
nums.reduce (total, num) -> total + num
# you can avoid parethesis in function calls with at least 1 argument
alert "hello world"
console.log "this is the end"
# on the contrary you cannot call a function without parenthesis and zero
# arguments
# this fails
alert
# this is O.K.
alert()
# use the fat arrow to bound a function call to the local context
# mostly used in callbacks
# avoid using the conventional self = this is not very coffeescriptish
this.clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => this.clickHandler(e)
# Object literals
# regular Javascript syntaxis
object1 = {one: 1, two: 2}
# without braces
object2 = one: 1, two: 2
# using new lines instead of commands
object3 =
one: 1
two: 2
# Arrays
# avoid the trailing comma
array1 = [1, 2, 3]
# using new lines
array2 = [
1
2
3
]
Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.