Deploying Angular
to Azure
William Grasel
@willgmbr
Angular? Azure? Que?
One Framework.
Mobile & desktop.
AngularJS !== Angular
É apenas Angular!
Bem vindo ao Semantic Versioning!
Azure. Cloud for all.
Como eu começo?
Você pode usar algum Seed
Ou você pode começar do jeito certo!
Production Build
Minify / Uglify
~70% redução de arquivos
Tree Shaking
ES6 modules são mais poderosos do q você imagina!
// utils.js
export function makeMeASandwich() {
return 'make sandwich: operation not permitted';
}
export function sudoMakeMeASandwich() {
return 'one open faced club sandwich coming right up';
}
// index.js
import { sudoMakeMeASandwich } from './utils.js';
sudoMakeMeASandwich();ES2015 Modules
Modo de Produção
desativa debugging e logs desnecessários
Ahead-of-Time Compilation
prepara seus templates, tira módulos do framework desnecessários e melhora seu código
Veja a diferença:
Um bundle inicial ideal deveria ter até uns 300kb
Veja como é difícil fazer tudo isso:
ng build --prod
Melhorando o Carregamento
Não se esqueça do GZip!
~70% redução de arquivos
Lazy Loading!
divida sua app por rotas ou features
// src/app/app-routing.module.ts
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
export const routing = RouterModule.forRoot([
{ path: '', component: HomeComponent },
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },
{ path: '**', redirectTo: '' }
]);Lazy Loading Example
Server Side Rendering
com Angular Universal
> ng generate universal <name>
> ng build --app=<name>
// index.server.ts
// Express server
const app = express();
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
}));
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});Caching Like a Boss!
Gerencie cache estático e dinâmico com Service Workers
Gerencie sua estratégia para cache dinâmico!
Mais uma vez a CLI faz o trabalho sujo para você:
> ng new --service-worker
> ng generate app-shell