Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
This is the slides I used when I shared my humble insight on Django to the students in University of Taipei in 2016. Please feel free to correct me if there is anything wrong.
NestJS (https://nestjs.com/) is a Node.js framework for building server-side applications. This slide give you a brief introduction of Nest, and shows the examples like Service, Middleware, and Pipe, etc.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
This is the slides I used when I shared my humble insight on Django to the students in University of Taipei in 2016. Please feel free to correct me if there is anything wrong.
NestJS (https://nestjs.com/) is a Node.js framework for building server-side applications. This slide give you a brief introduction of Nest, and shows the examples like Service, Middleware, and Pipe, etc.
Here I discuss about reactive programming, observable, observer and difference between observable and promise.
Also discuss some of important operators like forkJoin, switchMap, from, deboucneTime, discardUntilChanged, mergeMap. I discuss some of observable creation function.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
webpack is a powerful module bundler and it becomes an essential part of our JavaScript Ecosystem. This ppt comprises an overview on webpack, some of the core concepts of webpack and it's configurations with some working examples.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
TypeScript ha cambiato il modo di scrivere JavaScript ed in questo talk andiamo a scoprirne le principali caratteristiche per scrivere "JavaScript che non si rompe!"
N.B. Le slides sono aggiornate sino a TS 3.
Here I discuss about reactive programming, observable, observer and difference between observable and promise.
Also discuss some of important operators like forkJoin, switchMap, from, deboucneTime, discardUntilChanged, mergeMap. I discuss some of observable creation function.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
webpack is a powerful module bundler and it becomes an essential part of our JavaScript Ecosystem. This ppt comprises an overview on webpack, some of the core concepts of webpack and it's configurations with some working examples.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
TypeScript ha cambiato il modo di scrivere JavaScript ed in questo talk andiamo a scoprirne le principali caratteristiche per scrivere "JavaScript che non si rompe!"
N.B. Le slides sono aggiornate sino a TS 3.
C# is entering its third decade of life. And it is consistently evolving over the years with lot of new features. Let's recap the recent 7.x evolution and what we expect for the 8.0 features.
Presentation done about scripting with the JGrass console.
The presentation is in Italian, but there are many code snippets, so it could be easy to understand for anyone.
Qt Lezione3: un visualizzatore di immaginiPaolo Sereno
Questa lezione sul toolkit Qt permette di scrivere una semplice applicazione di visualizzazione immagini, i formati sono quelli più comunemente usati: JPG, BMP, PNG etc.
Ho incontrato django 8 mesi fa e mi ha riconciliato con la programmazione web che francamente detestavo. Ne ho apprezzato il disegno e la chiarezza.
Qui presento una libreria -- jungle -- ed alcune applicazioni costruite attorno a django sostituendo il sistema di templating originario con 'mako', un sistema di templating recente di Michael Bayer autore fra l'altro di sqlalchemy.
Il sistema di templating di django è forse uno degli elementi più criticati e più difesi dagli sviluppatori di django. L'idea di base è che deve restare facilmente utilizzabile da una utenza (il grafico web) che ha normalmente poca dimestichezza con la programmazione motivo per cui i tradizionali elementi di programmazione sono ridotti o mancanti.
L'esperienza mia è che in molte realtà invece chi scrive le pagine è il programmatore stesso o persona che può imparare con uguale sforzo i rudimenti per potere usare dei sistemi di templating che permettono alcuni costrutti python.
A questo punto si aprono molte possibilità decisamente efficaci. I template risultano molto più leggibili senza perdere in chiarezza. Particolarmente efficace è l'uso di layout simbolici per la creazione di form e tabelle.
La relazione vuole presentare il lavoro fatto in Thunder Systems srl negli ultimi 8 mesi e disponibile con licenza GNU tramite lo studio di alcune piccole applicazioni costruite con questa libreria fra cui un sistema di ticketing ed un sistema di gestione orari dipendenti/cartellino/badge.
Enrico Zimuel - PUG Milano meetup - Codemotion Milan 2017Codemotion
Meetup del PHP User Group Milano con presentazione delle attività del gruppo e dell'associazione GrUSP per la diffusione delle buone pratiche nel mondo dello sviluppo web. Durante il meetup ci sarà anche un intervento di Enrico Zimuel sulle novità del PHP 7.1 (e 7.2), con la presentazione del suo nuovo libro "Sviluppare in PHP 7. Realizzare applicazioni web e API professionali" edito da Tecniche Nuove.
With Visual Studio 2017, we have a new C # language update. After a brief review of Update 6.0, we'll see what's new. The themes of Update 7 are: Working with Data, Improved Perfomances, and Code Simplification.
Le novità introdotte in TYPO3 CMS 7.3, nuova versione rilasciata il 16 giugno 2015.
A voi i commenti sulle nuove funzionalità introdotte, in attesa del rilascio LTS definitivo, che renderà questo cms ancora più veloce e stabile.
Programmazione a oggetti tramite la macchina del caffé (pt. 2)Marcello Missiroli
Una introduzione semplice e (spero) intuitiva al mondo della programmazione a oggetti usando come riferimento una macchina del caffé (tipo Nespresso)
Slides 2 di 3
The benefits of Clean Code are obvious: stable programs, better maintainability, finding bugs faster and easier upgrading of software. A lot of advices have been already written about Java clean code (first of all in Robert C. Martin book), what about Android? Are the same advices valid? Or the way we write code must be different because it's a mobile platform? Are there any best practices about resources and the other Android stuff? In this talk we'll see some practical examples of how take advantage of Java and Android framework to write clean code and keep a project manageable.
Django: utilizzo avanzato e nuove funzionalitàskam
Django è uno dei framework web più apprezzati e utilizzati dalla comunità Python (e non solo).
I suoi punti di forza sono rappresentati dal suo utilizzo rapido e intuitivo, l'ottima documentazione e una larga comunità di sviluppatori ed utilizzatori.
A più di un anno di distanza dal rilascio della versione 0.96 le feature e i miglioramenti introdotti sono stati molti.
La presentazione mostra alcune di queste novità e l'utilizzo avanzato di alcuni componenti del framework.
Similar to Introduzione ad ECMAScript 6 (ES6) e TypeScript (20)
Angular 4 - convertire o migrare un'applicazione AngularjsGiovanni Buffa
Seminario renuto all'IRES di Udine sulla migrazione, attraverso UpgradeModule, o la riscrittura di un'applicazione AngularJs in una applicazione Angular 2/4
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Workshop Ideare e creare Web Applications, Introduzione ad AngularJSGiovanni Buffa
Gli argomenti trattati durante il Workshop gratuito sull'ideazione e creazione di Web Applications con AngularJS:
- Metodologie innovative di ideazione e creazione di Web Applications;
- Sfide e problemi del lavoro in team;
- Introduzione ad AngularJS e alle sue componenti principali;
- Dimostrazione pratica di una WebApp
Developing for Performances - Laboratorio di Web Design 2014/15Giovanni Buffa
Developing for Permfances: quali sono le cose che veramente contano nella realizzazione di un sito internet. Come poter velocizzare il caricamento di un sito internet.
Introduction to SEO, based on the official document provided by Google: https://static.googleusercontent.com/media/www.google.com/it//intl/it/webmasters/docs/search-engine-optimization-starter-guide-it.pdf
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
3. in collaborazione conES6 & TypeScript
TypeScript è un super-set di
JavaScript, OpenSource, realizzato e
mantenuto da Microsoft.
Estende la sintassi di JavaScript,
rendendo la sua adozione più
immediata e veloce.
3
5. in collaborazione conES6 & TypeScript
✴TypeScript è stato ideato per realizzare Web Applications su larga
scala, in modo da rendere più facile il mantenimento del codice;
✴La pre-compilazione e i costrutti introdotti da TypeScript rendono il
codice più espressivo, riducendo il numero degli errori in fase di
stesura;
✴Permette già da subito di utilizzare buona parte delle novità
introdotte con ES6 senza sacrificare il supporto a browser più
datati.
5
6. in collaborazione conES6 & TypeScript
✴TypeScript è completamente slegato da Angular. Anche se è
possibile scrivere un'applicazione Angular utilizzando JavaScript, il
framework stesso è scritto in TypeScript. Inoltre, la complessità di
Angular rende TypeScript una tecnologia quasi necessaria.
✴Essendo slegato da qualsiasi contesto, è possibile utilizzare
TypeScript per qualsiasi progetto JavaScript (e consiglio di farlo).
6
8. in collaborazione conES6 & TypeScript
✴TypeScript previene gli errori a compile-time;
✴Introducendo i tipi, permette di avere più controllo, rendendo il
codice autoesplicativo e mantenibile prevenendo, di nuovo, gli
errori;
✴Tutto il codice ES6 può venir convertito in codice ES5 al momento
della compilazione in modo trasparente e sicuro.
8
9. in collaborazione conES6 & TypeScript
this
class
let
const
() => { }
map
forEach
(a = 10) { }
[…params]
`Awesome string ${interpolation}`{ x, y }
export
import
extends
Symbol
Typed Arrays
Promise
ES6
(…b) { }
9
14. in collaborazione conES6 & TypeScript
Molte delle novità introdotte con ES6
sono delle shortcuts rispetto ad ES5,
andando a semplificare il lavoro degli
sviluppatori.
Per maggiori informazioni
http://es6-features.org/
14
16. in collaborazione conES6 & TypeScript
Assieme a var, è stata creata let,
variabile di tipo block-scoped.
16
var a = 1;
var b = 2;
if(a > b){
let c = 3;
}
console.log(c);
// ReferenceError
17. in collaborazione conES6 & TypeScript
È stato introdotto anche l'uso delle
costanti con const
17
const PI = 3.14;
console.log(PI);
// 3.14
PI = 2;
// invalid assignment to const 'PI'
19. in collaborazione conES6 & TypeScript
Vengono introdotte le Arrow Functions, un modo per definire
una funzione in modo più semplice.
Grazie a questo costrutto viene anche risolto il problema di this
all'interno degli oggetti.
19
20. in collaborazione conES6 & TypeScript 20
var log = function(msg) {
console.log(msg);
}
var log = msg => console.log(msg);
21. in collaborazione conES6 & TypeScript 21
var c = {
name: 'Pippo',
greet: function(){
var setName = (newName) => this.name = newName;
setName('Pluto');
}
}
22. in collaborazione conES6 & TypeScript
Grazie ai default parameters, è possibile valorizzare un parametro
in ingresso di una funzione senza la necessità di definirlo al
momento dell'utilizzo della funzione stessa.
22
23. in collaborazione conES6 & TypeScript 23
var log = function(msg = 'This is a message') {
console.log(msg);
}
log();
24. in collaborazione conES6 & TypeScript
È possibile passare n parametri in ingresso ad una funzione
grazie allo spread operator.
24
25. in collaborazione conES6 & TypeScript 25
var log = function(msg, ...other) {
const otherString = other.join(' ');
console.log(msg + ' ' + otherString);
}
log('This is a message', 'a', 'b', 3);
27. in collaborazione conES6 & TypeScript
Grazie a string interpolation, è possibile formattare una stringa,
senza ricorrere alla concatenazione classica, utilizzando il
simbolo `` (back-tick).
Vengono mantenuti anche spazi, tabulazioni e a capo.
27
28. in collaborazione conES6 & TypeScript 28
let a = 'This is';
let b = 'a message.';
console.log(`${a} ${b}`);
let a = 'This is';
let b = 'a message.';
console.log(`
${a}
${b}
`);
30. in collaborazione conES6 & TypeScript
È possibile concatenare più array grazie allo spread operator.
30
31. in collaborazione conES6 & TypeScript 31
let a = [1, 2, 3];
let b = [4, 5, 6];
console.log([...a, ...b]);
console.log([...b, ...a]);
32. in collaborazione conES6 & TypeScript
Grazie al destructuring è possibile mappare, valore per valore, gli
elementi di un array*.
32
* utilizzabile anche su oggetti.
33. in collaborazione conES6 & TypeScript 33
const a = ['Pippo', 'Pluto'];
let [firstname, lastname] = a;
console.log(firstname);
console.log(lastname);
34. in collaborazione conES6 & TypeScript 34
const a = ['Pippo', 'Pluto', 'Paperino'];
let [firstname, , lastname] = a;
console.log(firstname);
console.log(lastname);
36. in collaborazione conES6 & TypeScript
Le classi in ES6 rappresentano un modo veloce per utilizzare le
funzioni come function constructor.
36
37. in collaborazione conES6 & TypeScript 37
class Person = {
constructor(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
sayHi(){
return `Hi ${this.firstName}`;
}
}
var pippo = new Person(‘Pippo’, ‘Pluto’);
console.log(pippo.sayHi());
38. in collaborazione conES6 & TypeScript 38
var Person = (function () {
function Person(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
Person.prototype.sayHi = function () {
return "Hi " + this.firstname + "!";
};
return Person;
}());
var pippo = new Person(‘Pippo’, ‘Pluto’);
console.log(pippo.sayHi());
39. in collaborazione conES6 & TypeScript
Per avere maggiore controllo sulle proprietà della classe, è
possibile implementare getter e setter.
39
40. in collaborazione conES6 & TypeScript 40
class Person = {
constructor(firstName, lastName){
this._firstname = firstname;
}
get firstname() {
return this._firstname;
}
set firstname(value) {
if (this._firstname.length === 0) {
this._firstname = value;
} else {
console.log('You cannot change the name!');
}
}
}
var pippo = new Person(‘Pippo’, ‘Pluto’);
console.log(pippo.firstname);
pippo.firstname = 'Paperino';
41. in collaborazione conES6 & TypeScript
È possibile estendere le classi (principio di ereditarietà).
41
42. in collaborazione conES6 & TypeScript 42
class BaseLog {
constructor(){
this._logName = 'Log 1';
}
log(msg){
console.log(msg);
}
}
class Logger extends BaseLog {
constructor(logName){
super(logName);
}
writeLine(msg){
super.log(`${msg}rn#`);
}
}
var logger = new Logger(‘Test’);
logger.log('This is a log');
logger.writeLine('This is another log');
44. in collaborazione conES6 & TypeScript
Con ES6 è stata aggiunta la possibilità di creare dei moduli da
poter esportare ed importare a seconda delle esigenze.
Allo stato attuale, per poter utilizzare questa feature è necessario
un module loader come CommonJS o AMD.
Grazie ad Angular CLI (e Webpack), questa feature è già attiva e
funzionante in un nuovo progetto Angular.
44
45. in collaborazione conES6 & TypeScript 45
// customer.js
export let name = 'James';
export let city = 'Chandler';
// main.js
import { name, city } from './customer';
console.log(name);
console.log(city);
// main2.js
import * as customer from './customer';
console.log(customer.name);
console.log(customer.city);
47. in collaborazione conES6 & TypeScript
Con Map e Set è possibile collezionare e salvare dei dati.
Map può salvare una collezione di coppie chiave/valore (la chiave
deve essere univoca).
47
48. in collaborazione conES6 & TypeScript 48
const map = new Map();
// set items
map.set('Pippo', 'Pluto');
map.set('One', 'Item');
// duplicate index, ignored
map.set('Pippo', 'Pluto');
// get size of map
console.log(map.size);
// get an item
console.log(map.get('Pippo'));
// check if item exists
console.log(map.has('Pippo'));
// delete an item
map.delete('One');
// clear list
map.clear();
49. in collaborazione conES6 & TypeScript
Set può salvare una collezione di valori (il valore deve essere
univoco).
49
50. in collaborazione conES6 & TypeScript 50
const set = new Set();
// add items
set.add('Pippo');
set.add('Pluto');
// duplicate value, ignored
set.add('Pippo');
// get size of set
console.log(set.size);
// check if item exists
console.log(set.has('Pippo'));
// delete an item
set.delete('Pluto');
// clear list
set.clear();
52. in collaborazione conES6 & TypeScript
Tutte le feature di ES6 finora viste possono essere utilizzare fin da
subito con TypeScript, permettendo, inoltre, la compatibilità con
sistemi più datati*.
52
* Non tutte le possibilità di ES6 vengono supportate e convertite da TypeScript: https://kangax.github.io/compat-table/es6/
56. in collaborazione conES6 & TypeScript
TypeScript, tecnicamente, è un transpiler, ossia "converte" il
linguaggio con cui stiamo scrivendo (typescript) in un altro
linguaggio (javascript).
Poiché TypeScript è un superset di JavaScript, l'unico linguaggio
utilizzato è JavaScript stesso, potenziato con alcune possibilità
offerte da TypeScript.
56
58. in collaborazione conES6 & TypeScript
È possibile tipizzare una variabile
assegnando un tipo di dato
58
let a: number = 1;
let b: string = 'This is a string';
let c: boolean = true;
let d: undefined;
let e: null = null;
59. in collaborazione conES6 & TypeScript 59
let a: number = 1;
La definizione del tipo è assolutamente opzionale.
Tuttavia, definire il tipo di dato previene gli errori e
permette ad IDE ed editor predisposti di aiutare lo
sviluppatore con suggerimenti di completamento.
60. in collaborazione conES6 & TypeScript
I tipi di dato possono essere aggiunti
anche a funzioni, sia per i parametri
d'ingresso, che per il valore di ritorno
60
function sum(a: number, b: number): number { }
function log(msg: string): void { }
Il tipo void indica che non ci sono
valori di ritorno.
61. in collaborazione conES6 & TypeScript
Esiste un tipo particolare introdotto da TypeScript,
cioè any, il quale permette di salvare qualsiasi tipo
di dato (e di modificarlo nel tempo).
61
const somethingSpecial: any;
È sempre buona norma usare meno any possibili!
62. in collaborazione conES6 & TypeScript
Per gli array (od oggetti in generale), è possibile
utilizzare due scritture diverse.
62
let d: number[] = [1, 2, 3];
let c: Array<number> = [1, 2, 3];
Il risultato sarà il medesimo, ma la seconda
definizione utilizza i generics per segnare che l'array
potrà contenere solo numeri.
64. in collaborazione conES6 & TypeScript 64
Oltre ai tipi di dato primitivi, TypeScript permette di creare dei
modelli di dati personalizzati, chiamati interfaces, con i quali
poter avere controllo sulle strutture dati complesse.
65. in collaborazione conES6 & TypeScript 65
interface IPerson {
firstname: string;
lastname: string;
age: number;
}
Le interfacce rappresentano un contratto (una firma) da
applicare alle variabili. Anche se lo ricordano, non sono oggetti
JavaScript.
67. in collaborazione conES6 & TypeScript 67
interface IPerson {
firstname: string;
lastname: string;
age: number;
weight?: number;
}
Alcuni elementi di una interfaccia possono essere opzionali
68. in collaborazione conES6 & TypeScript 68
class AppComponent implements OnInit {
ngOnInit() { }
}
Le interfacce, inoltre, possono venir implementate all'interno di
una classe mediante la direttiva implements.
interface OnInit {
ngOnInit(): void;
}
70. in collaborazione conES6 & TypeScript 70
Lo scopo principale di uno sviluppatore non è solo quello di
creare componenti con API ben definite, ma che si possano
anche riutilizzare.
In linguaggi come C# o Java esiste il concetto di generics, un
componente che possa essere utilizzato con una varietà di tipi di
dato, invece che con uno soltanto.
71. in collaborazione conES6 & TypeScript 71
function identity(arg: number): number {
return arg;
}
Prendiamo come esempio una funzione che, dato un parametro
in ingresso, ne ritorna lo stesso valore.
Se volessimo far si che il tipo dell'argomento e il ritorno della
funzione sia diverso per ogni tipo di dato, dovremmo creare n
funzioni, una per ogni tipo.
72. in collaborazione conES6 & TypeScript 72
function identity(arg: any): any {
return arg;
}
Potremmo utilizzare any per definire un valore generico (any, di
per sé, è un tipo generico).
Ma, in questo modo, perdiamo tutte le informazioni e le
possibilità che ci offre TypeScript.
73. in collaborazione conES6 & TypeScript 73
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<number>(10));
console.log(identity<string>('A string'));
Modificando la funzione impostandola con un generic, invece,
facciamo si che sia lo sviluppatore a scegliere il tipo di dato
corretto da utilizzare di volta in volta.
T è solo un placeholder ed una convenzione. Può essere utilizzata qualsiasi altra lettera.
75. in collaborazione conES6 & TypeScript 75
Finché utilizziamo i tipi di dato inclusi e gestiti da TypeScript,
possiamo trarre beneficio da tutte le sue feature.
Ma se volessimo utilizzare una libreria esterna, come ad esempio
jQuery, con TypeScript?
76. in collaborazione conES6 & TypeScript 76
$('#app').css('background-color', 'red');
error TS2304: Cannot find name '$'.
77. in collaborazione conES6 & TypeScript 77
Per risolvere questo problema, TypeScript mette a disposizione la
possibilità di creare un particolare file (.d.ts) al cui interno ci
sono le definizioni dei tipi di dato.