EtiquetaJavascript

Como crear typings para librerías en Typescript ?

Si algo tengo que reconocer es que Typescript nos permite sentir que tenemos el control en javascript y eso es gracias también a los typings (tsd) , pero algunas librerías no tienen los tiene typings, yo me he visto en necesidad de escribir los typings de la librería rdjs.

Creando los typings

Para crear nuestro typings de la librería, tenemos que tener nuestra librería instalada por npm y dentro de de nuestro proyecto creamos un directorio llamado typings y dentro otro con el nombre de la libreria que queremos en mi caso rdjs

typings/index.d.ts
typings/rdjs/index.dt.ts

Typescript interpreta los archivos * .d.ts como archivos de declaración y estos describen los métodos que expone la librería sin la implementación de ellos.

En el directorio de typings tenemos un index.d.ts que contendrá una referencia a cada uno de nuestros archivos de declaración.

En este caso, typings/index.d.ts contendrá una referencia al archivo rdjs/index.d.ts.

/// <reference path="rdjs/index.d.ts" />

Definiendo los typings

Todas las definiciones de los typings la realizare en typings/rdjs/index.d.ts, lo primero que debemos hacer es crear un ambient module los cuales son declaraciones de tipo que no definen nada de lo que el código realmente hace, sino que simplemente define su forma.

Declaramos un módulo con el mismo nombre que el módulo npm en mi caso rdjs.

declare module 'rdjs'{

}

Luego definimos una interfaz con los métodos y su firma que queremos que utilice, en este caso he puesto los diferentes métodos que expone get, post, put y delete.

Realizamos un export del objecto rdjs es un objeto, nuestro módulo exportara una variable const implementando la interfaz que contiene nuestras especificaciones.

const rdjs: rdjs
export = rdjs

Ahora tenemos los métodos que utilizare en mi aplicación y puedo ver como visual studio code me autocompleta, me especifica la firma que necesita ese método y sus parámetros y el compilador me alerta de que no estoy enviado el tipo esperado.

Aqui todo el código completo o puedes verlo en Github

Ahora tenemos nuestro ideal puede autocompletar y ademas mostrarla firma de los métodos o visualmente alertarnos que no estamos pasando los parámetros especificados en la interfaz.

Ademas el compilador nos alerta de que no estoy enviado enviando los parámetros esperados.

scroller.ts(22,9): error TS2346: Supplied parameters do not match any signature of call target.

Happy Typings.

Hola Vuejs

Hace unos meses el comente a un amigo @oriolpuigbuil sobre Vuejs, pero no le di continuidad, ya que pensé que seria un framework que terminaría muriendo antes de que llegar el invierno, pero las cosas no han sido así con Vuejs.

Vuejs ha crecido en el mercado y se ha convertido en una competencia para React, no soy un experto en React, ni he podido trabajar en grandes proyectos con el, la última vez que hice algo hacé ya casi año y medio.

Porque Vuejs ?

Yo buscaba un framework fácil de usar que la curva de aprendizaje sea corta y me permita tener buenos resultados, React y Angular2 lo había probado pero muy por muy encima.

Angular2 requiere que mejore mis conocimientos en Typescript, React a pesar de haber realizado algunas pruebas, quería mirar otra opción.

Una de las cosas que mas me gusto de Vue es lo simple, crear una app solo basta con  crear un index.html importar la librería y ya podemos tener todo el potencial de Vuejs.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="col-xs-12">
        <div class="row">
        </div>
    </div>
</div>
</html>

Ahora agregamos una área de script donde tendremos el código de  Vue y creare una instancia de Vue object,  este tendrá la responsabilidad de controlar una área de nuestro html o el template de nuestra aplicación.

Para relacionar la instancia de Vue con nuestro template necesitamos pasar como parámetro un objeto json, en la propiedad “el” la cual permite especificarle a la instancia de Vue que área de nuestro html tendrá el control.

new Vue({
   el:'#app'
})

Para exponer propiedades a nuestro template usamos la propiedad data que recibe un json object también donde puedo definir la propiedad message.

new Vue({
   el:'#app',
   data: {
    message: 'Hello Vue'
   }
})

Para mostrar nuestra propiedad expuesta por data utilizamos {{  }} y el nombre de la propiedad.

<div class="row">
            {{message}}
 </div>

Aqui puedes ver todo el código funcionando.

Vue contiene varias propiedades ademas el y data, para agregar funcionalidades a nuestro componente  como computed, methods, watch que podemos explicar en mas detalle en otro post.

Happy Vue!

ES6!

Si vas a hacer un proyecto nuevo  o simplemente vas a una entrevista como Javascript developer, hay puntos ES6 que deberías conocer.

Aunque no todos los aspectos de ES6 son soportados de forma nativa por los browser, sabemos que Babel, Typescript o Traceur  nos ayudan a ‘transpilar’ o convertir nuestro código de ES6 a ES5.

Usar frameworks como Angular 1x, Angular2, Emberjs , React , Aurelia o Vue con ES6 nos permite tener un código mantenible, desacoplado y testable.

ES6 incluye  módulos, Clases, Promises , Arrow Function, Interpolación, Default Paramenters y puedes ver mas detalles en http://es6-features.org/

Aquí solo brindo una pincelada rápida de los aspectos de ES6 que mas uso, para el proceso de transpiling usare JSPM y Babel , si no lo has configurado te recomiendo  “Manejo de módulos y Dependencias con JSPM“.

let y const

ES6 nos facilita el uso de let lo cual permite definir una variable para un scope especifico.

var lebron = 23
       if (true) {
           let lebron = "king";
           console.log(lebron); //king
       }
       console.log(lebron) //23

Ademas de let,  tenemos “const” para definir un valor constante que no varia cuando intentamos modificar su valor.

const CAVS = "winner"
CAVS = "losser"
console.log(CAVS)
//Resultado: Line 13: "cavs" is read-only

Arrow Functions =>

Es la forma corta de definir funciones en ES6,  si usamos “concise body” no es necesario usar el return para devolver el valor.

let WhoMVPGuy = (player) => player + " MVP"
console.log(WhoMVPGuy("lebron"))
// lebron MVP

Classes

Ya podemos crear clases con el keyword “class”  y utilizando this en el constructor podemos crear propiedades  o get para propiedades de solo lectura, ademas métodos  como MiMetodo() o métodos estáticos con “static”.

export class App {
    constructor() {
       console.log("hola");
       this.team = "cavs";
   }
    get CavsProperty() {
        return "Are you ready!!!"
   }
    ShowView() {
       const cavs = "winner";
       var lebron = 23;
       if (true) {
           let lebron = "king";
           console.log(lebron); //king
       }
       console.log(lebron) //23
       let WhoMVP = function(player) {
           return player + "MVP"
       }
       let WhoMVPGuy = (player) => player + " MVP
       console.log(WhoMVPGuy("lebron")
   }
   static GetPlayers() {
       console.log("Irving , Shumpper!")
   }
}

El keyword “extends” nos permite heredar de otra clase, “recordando llamar el método super()” en el constructor de clase hija, para iniciar el constructor de la clase padre.

export class Team {
   constructor() {
        this.team = "cavs";
   }
}
export class Player extends Team {
   constructor(number = 0) {
       super()
       this.number = number;
   }
}
let king = new Player(12)
console.log(king);
//Resultado: Player {team: "cavs", number: 12}

Interpolation

ES6 nos permite una forma fácil de interpolar valores en un string, usando `como delimitador y `${nuestravariable}  para renderizar.

let WhoMVPGuy = (player) => `Soy un el jugador ${player} el real MVP`
// Resultado: Soy un el jugador lebron el real MVP

For “of | in”

En el for podemos iterar con “of” ó “in”, con of lo realizamos  sobre el objeto.

let players = ['lebron', 'curry', 'durant'];
for (let player of players) {
    console.log(player);
}
//Resultado: lebron, curry, durant

Con “in” es sobre indices.

let players = ['lebron', 'curry', 'durant'];
for (let player in players) {
    console.log(player);
}
//Resultado: 0, 1, 2

Promises

ES6 tiene soporte nativo a las promises, las promesas es un objeto que espera a que una operación se complete y cuando finaliza esta puede enviar un “resolved o “rejected”.

El constructor de new Promise() acepta dos funciones como parámetros  ‘resolve’ y ‘reject’.

GetChampion(cavs, gsw) {
 const promise = new Promise(function(resolve, reject) {
 if (cavs > gsw) {
 resolve("cavs win")
 } else {
 reject(new Error('gsw win'))
 }
 })
 return promise
 }

Al devolver una promesa , el valor resuelto de la promesa se van pasando a las funciones asignadas o usando catch podemos tomar el error.

//usando la promesa
let cavs = 4
 let gsw = 3
 app.GetChampion(cavs, gsw).then(function(res) {
 console.log(res)
 }).catch(err => console.log(err))

//resultado: "cavs wins".

Nota: Recomiendo que mires el post de @carlosazaustre sobre manejar asincronía en js.
https://carlosazaustre.es/blog/manejando-la-asincronia-en-javascript/

Happy ES6!

SPA en 2016 ?

Primeramente, recomiendo como lectura obligatoria la presentación de @CKgrafico sobre la evolución de desarrollo frontend.

Estamos en 2016, el desarrollo de SPA ha cambiado mucho con relación a sus inicios, los actores como jquery, knockout, mootools han quedado un poco limitados con los requerimientos del desarrollo actual.

El mercado actual nos brinda un sin número de Frameworks y tecnologías para el desarrollo de frontend.

Al momento de seleccionar un Framework para nuestra SPA tenemos que asegurarnos que este nos brinde los aspectos necesarios para el desarrollo, como es la creación de components, routing, data binding, templates, models, services, DI, testing etc.

Este framework debe permitirnos desarrollar nuestra SPA en capas tomando en cuenta la responsabilidad de cada una de ellas.

La vista(view) debe estar conformada solo de html / css y su rol es únicamente definir la estructura e interfaz de usuario, este framework debe brindarnos la capacidad de tener soporte para templates o apoyarse en alguna librería como handlebars o mustache.

El framework debe permitirnos tener clases que representen controllers y manejen el envío de datos dinámicos a la vista(view) e interactuar con los elementos, además de tener clases que representen los servicios para encapsular los métodos de acceso a las api, entre los diferentes componentes de nuestra aplicación.

Al desarrollar debemos apostar por HTML5, ES6 y CSS3 para poder tener muchos problemas resueltos y no tener que reinventar la rueda.

HTML5

Nos brinda un sin número de opciones en el browser del cliente y hacer que nuestra aplicación entre estas tenga soporte a Canvas, Geolocation , Video, IndexDB, LocalStorage y SessionStorage.

https://developer.mozilla.org/es/docs/HTML/HTML5

ES6

Esta versión de Javascript a diferencia de ES5 nos permite tener módulos, classes , promesas, templates de forma nativa en Javascript y más opciones.

https://github.com/lukehoban/es6features#readme

Nota: No todas las bondades de ES6 son soportadas por los browsers, pero podemos utilizar transpilers y polyfills los cuales compilan nuestro código de ES6 a ES5 y  a la vez ser soportado por los browsers.

CSS3

Los estilos son un aspecto importante y es vital basarnos en css3 para poder tener soporte a Media Queries, Colores, Selectores de 3 nivel, Animaciones.

http://www.w3schools.com/css/css3_intro.asp

Pero qué herramientas necesito?

Un Editor moderno,Nodejs (Transpiler/Polyfills) ,Package Manager (Bower, Nuget, NPM, JSPM) y apostar por un Framework Javascript (Angular, React, Ember, Aurelia etc.)

Editores o IDE

Este es un aspecto importante ya que necesitamos que un IDE o Editor nos facilite el refactor, autocompletado, soporte de plugins para frameworks o librerías al día de hoy y los que puedo recomendar son:

WebStorm https://www.jetbrains.com/webstorm/

Visual Studio Code https://code.visualstudio.com

SublimeText 3 https://www.sublimetext.com/3

VS2015: https://www.visualstudio.com

Emacs:  https://www.gnu.org/software/emacs/

Gracias a Juanma  por recordarme a Emacs, es un editor al que hay que dedicarle su tiempo a aprenderlo.


Guia básica de Emacs: http://www.braveclojure.com/basic-emacs/

Configuraciones ya listas para Javascript en Emacs

@gulnor https://github.com/jmhdez/emacs.d/blob/master/lang/javascript.el

Yo uso Visual Studio Code

Package Manager

Un Package manager se encarga de facilitarnos el proceso de registro, descarga y dependencias de librerías de que usamos en nuestra aplicación.

Existen diferentes gestores de paquetes:

Nuget: https://www.nuget.org/

Bower: https://bower.io/

NPM: https://www.npmjs.com/

JSPM: http://jspm.io/

Yo uso NPM y JSPM.

Transpiladores

Los transpiladores nos permiten usar las bondades de ES6 o ES7 al día de hoy y convertirlas a ES5, además que mediante polyfills podemos darle soporte en los navegadores.

Al día de hoy contamos con los siguientes:

Babel: https://babeljs.io/

Typescript: https://www.typescriptlang.org/

Traceur: https://github.com/google/traceur-compiler

Yo a nivel personal inicie con Typescript debido a que estaba realizando ciertas cosas con Angular 2, pero al día de hoy estoy replanteando seriamente usar Babel.

Frameworks

Aquí existe un mercado increíble de opciones en la cual cada una tiene sus ventajas y su forma especial, sería bueno que mires algunos y te quedes con el que más te gusta.

https://angular.io/ Google

http://emberjs.com/ by Yehuda Katz

https://facebook.github.io/react/ Facebook

http://aurelia.io Aurelia

Ahora solo toca tomar lo que nos más nos guste y desarrollar SPA pensando en el 2016.

Happy SPA!

Imagen Designed by Freepik

Como usar Requirejs

Muchas personas cuando crean una aplicación tiene que preocuparse por el orden de la carga de los módulos y librerias. como jquery, knockout, viewmodel, el model los cuales tiene dependencias entre si.

RequireJS es una implementación de AMD para declarar módulos y estos carguen de forma dinámica, definiendo las dependencias entre ellos y lo requeridos para la ejecucion en su contexto.

Seguir leyendo

Cargando templates.hbs desde archivos con Ember 1x.

ember-handlebars-loader una excelente libreria que nos permite cargar nuestro templates desde ficheros.

Suponemos que tenemos nuestro folder de templates y dentro de el tenemos nuestros archivos “application.hbs”,”index.hbs”, “cards.hbs”,”card.hbs” o puedes tener folders  como “cards/index.hbs” .

<script type="text/javascript" src="js/libs/ember-handlebars-loader-0.0.1.js"></script>
   <script type="text/javascript">
       EmberHandlebarsLoader.loadTemplates(['application','index','cards','card','cards/index','about']);
   </script>

 

EmberJS “Object Model”

En estos días he estado dedicado en mejorar mas mis conocimientos de javascript, he decidido por apostar en emberjs porque es bastante simple de usar y me resulta interesante aprenderla a usar.

He decidido explicar lo poco que aprendí entre lineas.
codigo completo en github https://github.com/danywalls/ember

 

var guardo = 0;

window.ClienteApp = Ember.Application.create();
var Cliente = Ember.Object.extend({
get_cliente: function(){
return "Hola " + this.get("nombre") + " " + this.get("apellido") + " tu clave es " + window.btoa(this.get("clave"))
}, updateMessage: Ember.observer(function(){

console.log("se actualizo" + this.get("nombre"));
if( guardo > 0)
{
$("#resultados").empty();
$("#resultados").append(cliente.get_cliente());
}
},"nombre")
});

var cliente = Cliente.create({});
cliente.addObserver("apellido",function(){
console.log("apellido cambio");
});
$(document).ready(function()
{
$("#nombre").focusout(function(){
cliente.set("nombre",$("#nombre").val());
})
$("#apellido").focusout(function(){
cliente.set("apellido",$("#apellido").val());
})
$("#guardar").click(function (){
guardo = 1;
cliente.setProperties({nombre:$("#nombre").val(), apellido:$("#apellido").val(), clave:$("#clave").val()});
$("#resultados").append(cliente.get_cliente());
});
//alert("hehehe");
});
Recordar importar las librerias :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js”></script>
<script src=”http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js”></script>

y el form :

<form id=”form_id” action=”index.html” method=”post”>
<label for=”nombre”>Nombre</label>
<input type=”text” id=”nombre” value=””>
<label for=”apellido”>Apellido</label>
<input type=”text” id=”apellido” value=””>
<label for=”clave”>Clave</label>
<input type=”text” id=”clave” value=””>
<a href=”#” id=”guardar”>guardar</a>
<div id=”resultados”>
</div>
</form>

Momentjs, DateJs y DateRangePicker

En esta semana me he visto en la necesidad de trabajar unos detalles de un datepicker de bootstrap, que a mismo tiempo pueda controlar las fechas de selección, los rangos de días y el mínimo de día pero a su vez sea multiIdioma y bloqueos de días.

He utilizado las siguientes librerías:

bootstrap-daterangepicker DatePicker de Bootstrap que permite bloqueo de fechas y rangos.

MomentJS: viene incluido en bootstrap-daterangepicker.

DateJS: excelente librería de Js para manejar Fecha.

La implementacion esta con los comentarios entre lineas, en caso de querer bajar el proyecto de ejemplo MomentJsDateJs .

Aqui explicare directamente el codigo javascript, en el cual hago referencias a los elementos que estan definidos en el html del codigo de ejemplo.

$(document).ready(function () {
moment.lang('es');
var FieldFromDate = $('#finicio');
var FieldToDate = $('#ffin');
var valFromDate = {
startDate: moment(),
endDate: moment().add('days', 365),
minDate:moment(),
singleDatePicker: true,
format: 'L' };
var valToDate = {
startDate: moment().add('days',1),
endDate: moment().add('days', 365),
minDate: moment().add('days', 1),
singleDatePicker: true, format: 'L' };
FieldFromDate.daterangepicker(valFromDate);
FieldToDate.daterangepicker(valToDate);
FieldFromDate.on('apply', function (ev, picker){
var dinicio = new Date.parse($("#finicio").val());
var dfin = new Date.parse($("#ffin").val());
if(moment(dinicio).isAfter(dfin))
{
console.log('la fecha de inicio es mayor que la fecha final ');
FieldToDate.val(moment(dinicio).add('days',1).format('L'));
var valToDate = { startDate: moment(dinicio).add('days',1),
endDate: moment(dinicio).add('days', 30),
minDate: moment(dinicio).add('days', 1),
singleDatePicker: true, format: 'L' };
FieldToDate.daterangepicker(valToDate); }
if(moment(dinicio).isBefore(dfin)) {
console.log('la fecha de inicio es menor que la final'); }
 });
 });

© 2017 Danywalls

Tema por Anders NorénSubir ↑