Raúl Jiménez

elecash@gmail.com

@elecash

Algunas cosas que no sabes sobre Angular

sobre mí

Angular GDE

videogular

academy partner

toptal partner

¿qué NO es Angular?

Angular no es...

  • AngularJS
  • Una librería
  • Un framework

una plataforma

Angular es...

Angular

CLI

command line interface

Crea una aplicación por nosotros con todo lo necesario para empezar

ng new my-app-name

preprocesadores css

Soporte para diferentes preprocesadores CSS: SASS/SCSS, LESS y STYLUS

ng new my-app-name --style=sass
ng new my-app-name --style=scss
ng new my-app-name --style=less
ng new my-app-name --style=stylus

generación de código

Permite crear componentes, módulos, servicios, rutas y más con solo un comando

ng generate module my-module --routing
ng generate component my-button
ng generate service my-data-service

Incluso crea un archivo con un unit test por nosotros

webpack eject

Exporta la configuración de webpack por defecto del Angular CLI para que podamos modificarla

ng eject

schematics

API para crear comandos propios del CLI

{
    "schematics": {
        "angular-app": {
        "factory": "./angular-app",
        "schema": "./angular-app/schema.json",
        "description": "Create an Angular application."
    },
    "component": {
        "factory": "./component",
        "description": "Create an Angular component.",
        "schema": "./component/schema.json"
    }
}

más información

Angular Elements

web components

  • Custom Elements
  • HTML Templates
  • Shadow DOM
  • HTML Imports

angular elements

  • Mejor invento ever made
  • Todas las ventajas de Angular
  • Con la flexibilidad de los Web Components

bootstrap

Crea un NgModule con tu @Component()

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from './hello.component';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ HelloComponent ],
    entryComponents: [ HelloComponent ]
})
export class HelloModule {
    ngDoBootstrap() {
    }
}

crea tu component

import { Component, EventEmitter, Input, Output, ViewEncapsulation } 
    from '@angular/core';

@Component({
    selector: 'hello-world',
    template: `
        <h1>Hello {{name}} !</h1>
        <button (click)="onClick()">Hi !</button>
    `,
    styles: [ `button { color: #3498db; }` ],
    encapsulation: ViewEncapsulation.Native
})
export class HelloComponent {
    @Input() name;
    @Output() hi = new EventEmitter<string>();

    onClick() {
        this.hi.emit(`Hi, ${this.name} talking.`);
    }
}

demo time!!

<body>
    <hello-world name="World"></hello-world>

    <div style="margin-top: 20px;">
        <input type="text" id="hello-world-label">
        <button type="button" onclick="onClickUpdate()">Update</button>
    </div>

    <script src="dist/main.bundle.js"></script>
    <script>
        const helloCp = document.querySelector('hello-world');
        const helloInput = document.querySelector('#hello-world-label');
        helloCp.addEventListener('hi', (data) => {
            console.log(data.detail);
        });
        function onClickUpdate() {
            helloCp.setAttribute('name', helloInput.value);
        }
    </script>
</body>

más información

Angular Universal

universal rendering

  • Server-side rendering (SEO)
  • Soporte de Node y .NET
  • Extensible a otros entornos...

angular iot

  • Hardware rendering (WTF)
  • Mismo código para web y hardware físico

más información

Progressive

Web

Apps

pwa para los amigos

  • Es una filosofía de desarrollo para crear apps que sean...
  • Ligeras y que carguen casi instantáneamente
  • Rápidas y sin pérdidas de fps
  • Parezcan nativas al usuario

angular service worker

  • Cachea nuestra app
  • Cachea datos cargados
  • Funciona off-line
  • Notificaciones push
  • Solo funciona en HTTPS!

más información