Artículo - JavaScript Developer

JavaScript Developer

1. Introducción

JavaScript es un Lenguaje de Programación interpretado desarrollado por Brendan Eich en 1995 cuando trabajaba en Netscape. JavaScript es orientado a objetos, basado en prototipos, débilmente tipado y dinámico. La especificación de este lenguaje se denomina ECMAScript y es elaborada por ECMA International.

Actualmente es uno de los Lenguajes de Programación mas usados en el mundo, ya que sirve para crear aplicaciones web, tanto de lado del cliente (desde sus inicios) y también de lado del servidor (en la actualidad).

En los 20 años de vida que tiene JavaScript, en los 10 primeros años solo se usaba para validaciones y manejo de controles, pero a partir de la incorporación de AJAX (2005), la creación de librerías como jQuery (2006), la creación de JavaScript en el servidor con NodeJS (2009), la aparición de las nuevas APIs sobre todo de HTML5 y la nueva especificación del lenguaje ECMAScript6 (2012), ha originado que JavaScript tenga un crecimiento exponencial.

Muchos desarrolladores escribían la mayor parte del código en el servidor, ya que los Frameworks de ese lado tenían una gran cantidad de APIs o Librerías que permitían realizar cualquier tipo de tareas, desde acceso a datos hasta gráficos, operaciones con datos, manejo de archivos, etc. Es por eso que se usaba mucho código en PHP, Java o .NET, ysolo un mínimo de código en JavaScript para validar, manejar el DOM y mejorar el formato o estilo.

Actualmente, todo lo que podíamos hacer en el servidor, lo podemos hacer en el cliente con JavaScript, desde hacer llamadas asíncronas con XHR o AJAX hasta manipular los datos, crear gráficos (en 2D y en 3D), cifrar datos, enviar y recibir notificaciones en tiempo real, etc. Esto se puede hacer nativamente usando las APIs de JavaScript o usando una Librería o Framework que encapsule dicho trabajo.

Nota: Antes yo escribía 80% de código en el servidor y 20% en el cliente, pero desde hace unos años escribo 20% de código en el servidor y 80% en el cliente usando JavaScript puro. Estos porcentajes concuerdan con "El Problema de la Performance" que se da 80% en el cliente y 20% en el servidor.

Muchos programadores creen conocer JavaScript, pero en realidad no conocen ni el 10% de lo que tiene. El propósito de este artículo es contribuir a aumentar ese conocimiento, mostrando la Historia, las APIs, las Librerías, los Frameworks, las Herramientas y las fuentes donde pueden aprender más sobre este lenguaje, para cambiar su forma de programar y usar "La Web como Plataforma de Desarrollo" a través del Navegador (Browser) usando como lenguaje "JavaScript".

2. Cronología de JavaScript (20 años)

- 1995: En Mayo Brendan Eich crea Mocha en 10 días
- 1995: En Setiembre se crea LiveScript
- 1995: En Diciembre cambia de nombre a JavaScript
- 1996: Microsoft crea JScript
- 1996: DHTML
- 1997: ECMA-262 Ed1 (ES1)
- 1998: DOM Level 1
- 1999: ES3 (Base JavaScript actual)
- 1999: Microsoft crea XmlHttpRequest (Pre-AJAX)
- 2000: DOM Level 2
- 2001: Douglas Crockford crea JSON
- 2004: DOM Level 3
- 2005: AJAX
- 2008: ECMAScript 4 (ES4)
- 2009: ECMAScript 5 (ES5). JSON, Object.create
- 2012: ECMAScript 6 (ES6). Modulos, Proxys
- 2012: Navigation Timing
- 2012: HTML5 Web Messaging
- 2012: Web Workers
- 2012: WebSocket
- 2013: Web Storage
- 2013: Touch Events
- 2013: Geolocation API
- 2013: Performance Timeline
- 2013: Web Notifications
- 2013: File API
- 2013: Messaging API
- 2013: Web Telephony API
- 2013: MediaStream Image Capture
- 2013: WebRTC 1.0
- 2013: Web Audio API
- 2014: Progress Events
- 2014: Indexed Database
- 2014: Server Sent Events (SSE)
- 2014: Web Cryptography API
- 2014: Web NFC API
- 2014: XMLHttpRequest Level 1
- 2014: Push API
- 2014: Streams API
- 2014: Screen Orientation API
- 2014: Service Workers
- 2014: TCP and UDP Socket API
- 2014: URL
- 2014: Clipboard API and Events
- 2015: ECMA-262 (6th Edition). ECMAScript 2015 Language Specification

3. APIs de JavaScript

- Document Object Model (DOM)
  -) HTML: Document, Element, Event, HTML..., Node, NodeList, ParentNode, etc.
  -) XML: XMLDocument.
  -) SVG: Scalable Vector Graphics

- Gráficos
  -) Canvas: CanvasGradient, CanvasRenderingContext2D, HTMLCanvasElement, ImageData.
  -) SVG: SVGAnimate, SVGAnimated, SVGColor, SVGElement, SGVFont, SVGPath, SVGText.
  -) WebGL: WebGLBuffer, WebGLObject, WebGLRenderbuffer, WebGLRenderingContext, etc.

- Almacenamiento
  -) File API: Blob, File, FileList, FileReader, FileReaderSync, URL.
  -) IndexedDB: IDBCursor, IDBDataBase, IDBFactory, IDBIndex, IDBObjectStore, etc.
  -) Web Storage: Storage, StorageEvent, WindowLocalStorage, WindowSessionStorage.

- Conectividad
  -) Web Sockets: BroadcastChannel, CloseEvent, EventSource, PortCollection, WebSocket.
  -) Messaging: MessageChannel, MessageEvent, MessagePort.
  -) WebRTC: RTCPeerConnection, RTCIceServer, RTCIceCandidate, RTCDataChannel, etc.

- Acceso:
  -) Drag And Drop (D&D): DataTransfer, DataTransferItem, DataTransferItemList, DragEvent.
  -) FullScreen: Document (fullscreenElement, fullscreenEnabled), Element (requestFullscreen).

- Estilos
  -) CSS Object Model: CSS, CSSRule, CSSStyleSheet, MediaList, StyleSheet, etc.
  -) Selectors: Document (querySelector, querySelectorAll), DocumentFragment, Element.

- Multimedia
  -) Animation Timing: Window (cancelAnimationFrame, requestAnimationFrame).
  -) Media: AudioTrack, HTMLMediaElement, HTMLTrackElement, MediaController, VideoTrack.
  -) Pointer Lock: Document (exitPointerLock), Element (requestPointerLock), MouseEvent.
  -) Web Audio: AnalyserNode, AudioBuffer, AudioListener, AudioParam, DelayNode, GainNode.

- Performance
  -) Browser: History, ImageBitmap, Location, MimeType, Navigator, WindowBase64 (atob, btoa),
     WindowTimers (clearInterval, clearTimeout, setInterval, setTimeout), etc.
  -) Typed Arrays: ArrayBuffer, ArrayBufferView, DataView, Float..Array, Int..Array, Uint..Array.
  -) Web Workers: AbstractWorker, SharedWorker, Worker, WorkerLocation, WorkerNavigator, etc.

- Componentes Web
  -) Shadow DOM: CSSHostRule, CSSRule, Element (createShadowRoot), ShadowRoot, etc.
  -) Custom Elements: Element (customElements.define)
  -) HTML Imports: HTMLLinkElement (rel=import), Document (write, close).

- ECMAScript
  -) Tipos de Datos Primitivos: Boolean, Null, Undefined, Number, String, Symbol (ES6).
  -) Tipos Objetos: Array, Date, Error, Function, Global, JSON, Math, Object, RegExp.
  -) Colección de Claves (Objetos): Maps, Sets, WeakMaps, WeakSets.

- Seguridad Web (WebCryptography)
  -) Clases: Crypto, Algorithm, KeyAlgorithm, CryptoKey, SubtleCrypto, etc.
  -) Operaciones: encrypt, decrypt, sign, verify, deriveBits, wrapKey, unwrapKey,
     generateKey, importKey, exportKey, getLength.
  -) Algoritmos: RSASSA-PKCS1-v1_5, RSA-PSS, RSA-OAEP, ECDSA, ECDH, AES-CBC,
     HMAC, DH, SHA-1, SHA-256, SHA-384, SHA-512, CONCAT, HKDF-CTR, PBKDF2, etc.

- Comunicación Asíncrona con el Servidor:
  -) Cliente al Servidor: XmlHttpRequest (XHR)
  -) Servidor al Cliente: Server-Send Events (SSE)
  -) Bidireccional: Web Sockets

4. Cronología de Librerías y Frameworks de JavaScript (11 años)

- 2004: Dojo Toolkit (Alex Russell)

- 2005: Prototype JavaScript Framework (Sam Stephenson)

- 2005: Script.aculo.us (Thomas Fuchs)

- 2006: Yahoo UI Library (YUI)

- 2006: Google Web Toolkit (GWT)

- 2006: jQuery (John Resig)

- 2006: MooTools (Valerio Proietti)

- 2007: ExtJS (Jack Slocum)

- 2007: WaveMaker (Scott Miles)

- 2007: jQuery UI (Scott González, Adam Sontag, etc)

- 2008: Processing.js (John Resig)

- 2008: QUnit (John Resig)

- 2009: CofeeScript (Jeremy Ashkenas)

- 2009: Glow (BBC)

- 2009: Raphaël (Dmitry Baranovskiy)

- 2009: NodeJS (Ryan Dahl)

- 2010: BackboneJS (Jeremy Ashkenas)

- 2010: KnockoutJS (Steve Sanderson)

- 2010: AngularJS (Misko Hevery)

- 2010: Three.js (Ricardo Cabello)

- 2010: jQuery Mobile (jQuery Foundation)

- 2010: Jasmine (Pivotal Labs)

- 2011: Dart (Lars Bak, Kasper Lund)

- 2011: Ember.js (Yehuda Katz, Tom Dale)

- 2011: Modernizr (Paul Irish)

- 2011: D3.js (Bostock, Heer, Ogievetsky)

- 2011: Kendo UI (Telerik)

- 2011: Unit.js (Nicolas Tallefourtane)

- 2012: TypeScript (Anders Hejlsberg)

- 2012: Bootstrap (Mark Otto, Jacob Thornton)

- 2012: Enyo.js (Palm, HP)

- 2012: Meteor (Meteor Development Group)

- 2012: ExpressJS (TJ Holowaychuk)

- 2013: Polymer (Google)

- 2013: X-Tag (Mozilla)

- 2013: Webix (XB Software)

- 2013: React (Jordan Walke)

- 2013: Sails.js (Mike McNeil)

- 2013: Snap.svg (Adobe)

- 2014: Underscore.js (Jeremy Ashkenas)

- 2014: Socket.io (Guillermo Rauch)

- 2015: Reac Native (Tom Ochinno, Christopher Chedeau)

- 2015: Aurelia.io (Rob Eisenberg)

5. Herramientas de JavaScript

5.1. Herramientas de Calidad del Código (JavaScript Code Quality Tools)

1. JSLint

- URL: http://www.jslint.com/

- Es la más antigua y fué creada por Douglas Crockford en el 2002

2. JSHint

- URL: http://jshint.com/

- Team: Rick Waldron, Caitlin Potter, Mike Sherov, Mike Pennisi, y Luke Page

3. JSCS (JavaScript Code Style checker)

- URL: http://jscs.info/

- Team: Marat Dulin, Oleg Gaidarenko, Mike Sherov, Joel Kemp, Alexej Yaroshevich, Henry Zhu

4. ESLint (Pluggable JavaScript Linter)

- URL: http://eslint.org/

- Originalmente creada por Nicholas C. Zakas en el 2013

- Actualmente mantenida por jQuery Foundation

- Usuarios: Algolia, Disqus, 2GIS

- Requerimientos: Node.js or io.js

- Sistemas Operativos: Windows, Mac, Linux

5.2. Herramientas de Pruebas Unitarias (JavaScript Unit Testing Tools)

1. QUnit (JavaScript Unit Testing framework)

- URL: https://qunitjs.com/

- Originalmente creada por Jhon Resign en el 2006 como parte de jQuery

- En el 2008 fue extraida de jQuery para ser independiente en el 2009

- Usos: jQuery, jQuery UI, jQuery Mobile

2. Unit.js (Unit testing framework for JavaScript)

- URL: http://unitjs.com/

- Creado por el Francés Nicolas Talle (Nicolab) en el 2014

- Requerimientos: Node.js y el Browser

3. Jasmine (Behavior-Driven JavaScript)

- URL: http://jasmine.github.io/

- Creada por Pivotal Labs en el 2010

4. Mocha (the fun, simple, flexible JavaScript test framework)

- URL: https://mochajs.org/

- Creada en el 2011 por la organización Mocha

- Requerimientos: Node.js y el Browser

- Usos: should.js, express.js, chai, better-assert, unexpected

- Usuarios: Sauce Labs, Yahoo

- Contribuidores: Christopher Hiller, Daniel St. Jules, ScottFreeCode, David Da Silva

6. Entrenamiento en JavaScript

6.1. Libros

1. John Resig - Pro JavaScript Techniques (Apress, 2006)

2. Douglas Crockford - JavaScript: The Good Parts (O'Reilly, 2008)

3. Nicholas Zakas - High Performance JavaScript (O'Reilly, 2010)

4. David Flanagan - JavaScript: The Definitive Guide (6th Edition) (O'Reilly, 2011)

5. Kyle Simpson - You Don't Know JS. Scope & Closures (O'Reilly, 2014)

6. Kyle Simpson - You Don't Know JS. this & Object Prototypes (O'Reilly, 2014)

7. Kyle Simpson - You Don't Know JS. Types & Grammar (O'Reilly, 2015)

8. Kyle Simpson - You Don't Know JS. Async & Performance (O'Reilly, 2015)

9. Kyle Simpson - You Don't Know JS. Up & Going (O'Reilly, 2015)

10. Kyle Simpson - You Don't Know JS: ES6 and Beyond (O'Reilly, 2015)

6.2. Cursos Oficiales Microsoft Virtual Academy (MVA)

URL: https://mva.microsoft.com/

1. JavaScript Fundamentals for Absolute Beginners

2. JavaScript for Experienced Developers

3. Developing in HTML5 with JavaScript and CSS3 Jump Start

4. Introduction to Angular 2.0

5. Creating Web Applications with Ember

6. Angular Applications with TypeScript

7. Creating Dynamic Webpages with Knockout

8. Using Node.js with Visual Studio Code

9. Mastering Node.js Modules and Packages with Visual Studio Code

10. MEAN Stack Jump Start

11. Create HTML5 Apps with jQuery Jump Start

12. Single Page Applications with jQuery or AngularJS

6.3. Tutoriales

1. Learn Code Academy (USA)

- Javascript Tutorial For Beginners

- Javascript Fundamentals

- jQuery Tutorial for Beginners

- Modular Javascript

- Javascript is Weird...and AWESOME

- ES6

- Angular Tutorials

- Node.js Tutorials

- MEAN Stack Tutorials

2. Tech Sith (USA)

- JavaScript From Begining

- Object Oriented JavaScript

- JavaScript Prototype Inheritance

- Advanced Javascript Tutorial

- ECMA 6 (ES6, ES2015)

3. Level Up Tutorials (USA)

- JavaScript Tutorials

- AngularJS For Everyone

- React For Everyone

- Intermediate Meteor

4. Vish Academy (India)

- JavaScript in Hindi

- JQuery in Hindi

6.4. Conferencias

1. EmpireJS

2. Front End London (FEL)

3. JavaScript Frameworks Days

4. FITC Events

5. NodeJS

6. Connect JS

7. JSConf Colombia

8. JS Day España

9. JSConf Uruguay

10. JSConf Europa

11. Dot Conferences

12. Beyond Tellerrand

6.5. Reuniones (Meetups)

1. ViennaJS

2. Fullstack Academy

3. HTML5 User Group Dallas

4. New York Web Performance Meetup

5. Nebraska JavaScript

6. JavaScript Israel

6.6. En Vivo (Hangouts)

1. Desarrollo Web (España)

2. JavaScript Air

3. The Web Platform Podcast

6.7. Documentación Oficial

- W3C

- ECMAScript

- HTML5 Org

- Guía de Internet Explorer 11 para desarrolladores (Microsoft)

- Mozilla Developer Network (MDN)

- HTML5 Rocks (Google)

- W3Schools.com

7. Comentario Final

En este artículo me propuse dar la mayor cantidad de información sobre JavaScript, ya que en muchos lugares todavía no se toma conciencia de la necesidad de trabajar lo mas desconectado posible y solo actualizar en tiempo real los datos cuando ocurran cambios, para lo cual es necesario conocer mas JavaScript.

Particularmente, en los últimos 3 años mi orientación de desarrollador, cambio radicalmente, hacia el lado del cliente usando JavaScript y priorizando la performance usando una arquitectura con pocos archivos y poco contenido lo cual tiene ventajas en velocidad incomparables.

Si bien es cierto, en la mayor parte del mundo se esta de acuerdo en que JavaScript es el número 1 por encima de Java, PHP, Phyton, Ruby, C#, C++, etc; donde no estoy de acuerdo es en el uso indiscriminado de Frameworks sobre todo de lado del cliente que "debilitan el rendimiento".

Los programadores tienen que entender que el Navegador (Browser) es un Framework con cientos de clases y métodos (APIs), las cuales detallamos en el tema 3 de este artículo: "APIs de JavaScript" y que no es necesario usar ninguna Librería ni Framework para hacer cualquier cosa (al final tanto las Librerías como los Frameworks usan dichas APIs).

Hay que invertir mas tiempo aprendiendo lo que nunca pasará de moda (lo nativo) y dejar de lado la moda (las Librerías y Frameworks, que salen por decenas en un año y en poco quedan obsoletas). De mi parte llevo enseñando mas de 3 años las APIs de JavaScript en cada curso, taller o capacitación que hago.

Lamentablemente, en muchas partes todavía se piensa que se debe hacer todo de lado del servidor y los que piensan lo contrario (hacerlo de lado del cliente) lo hacen usando Librerías o Frameworks, por tanto, mi arquitectura y mis técnicas de programación de lado del cliente con JavaScript son solo requeridas por un grupo reducido de seguidores, lo cual me apena mucho y me anima a dar un paso al costado, ya que el mercado laboral y el de entrenamiento es reducido (todos quieren lo estándar, nadie quiere cambiar 180 grados).

Si los programadores siguieran las técnicas usadas en mis capacitaciones, cursos o talleres verían la diferencia brutal de velocidad entre una pagina web clásica o moderna (MVC, SPA, etc.) con lo que nosotros hacemos en forma nativa con pocos archivos: un HTML, un CSS, un JavaScript y un Sprite.

Si les gusto no se olviden de dar Like y el que desea lo puede compartir en cualquier medio: Sitio Web, Google+, FaceBook, Twitter, solo mantener el nombre del creador. Los que están llevando el Taller de los Domingos no falten ya que es el último mes de mi último curso (aprovechen lo poco que queda).