Angular 6 for Enterprise-ready web applications=Doguhan Uluca;Note=Erxin.txt

Angular 6 for Enterprise-ready web applications=Doguhan Uluca;Note=Erxin

# Introduction 
- become an author 

Packt is searching for authors like you                                                        If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

- environment 
    + CLI 
    chocolatey on windows 10 
    homebrew on mac 
    
    + scripting to automate 
    powershell on windows 10 
    bash on mac 
    
    + achieving a consistent and cross-platform development 
    nodejs 
    npm 
    git 
    visual studio code 
    chrome 

- install chocolate for windows, Chocolatey is a CLI-based package manager for Windows, which can be used for automated software installation.

    + run powershell 
    + run as administrator 
    + execute command 
    PS> Set-ExecutionPolicy AllSigned; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
    
    + more information 
    https://chocolatey.org/install
    
    + think of Chocolatey as a framework that you can build on top of. Chef, Puppet, Boxstarter, PowerShell DSC, Ansible, Saltstack, etc all have ways for using Chocolatey to ensure the state of a computer and packages installed.
    
- installing homebrew, https://brew.sh 
- in depth understand github, in-depth understanding of the benefits and pitfalls of Git and GitHub, you can read my 2016 article on the topic at: Bit.ly/InDepthGitHub.
    
- nodejs 
NodeJS's site: https://nodejs.org
Npm's site: https://www.npmjs.com
Angular's site: https://angular.ioLegacy 
AngularJS's site: https://angularjs.org/
Yarn's site: https://yarnpkg.com
React's site: https://facebook.github.io/react
    
- install nodejs with chocolatey
> choco install nodejs-lts -y 

$ brew install node@8                

    + node tools 
npx, excute node module locally 
rimraf, unix command rm -rf 
npm-update, analyzes your project folder and reports 
n, dead easy to tool to switch between versions of node quickly 
http-server 
npm-windows-upgrade 

- install visual studio code 
> choco install VisualStudioCode -y

$ brew cask install visual-studio-code 
    
- automation for window
Navigate to https://github.com/duluca/web-dev-environment-setup to find the scripts
Execute install-windows-deps.ps1 in PowerShell 
install-mac-deps.sh 

article at http://Red-gate.com/simple-talk/sysadmin/general/automating-setup-local-developer-machine.

- create a local weather web application 
    
    + Angular improves upon AngularJS in every way imaginable. The platform follows semver, as defined at https://semver.org/, 
    
- angular's philosophy
    
Verbose, decoupled, cohesive, and encapsulated code is the key to future proofing your code.

- standalone Material Update tool aims to make Angular Material updates less painful, found at Github.com/angular/material-update-tool,
    
- Angular Component Development Kit (CDK), Angular Material, Animations, and i18n. Angular Universal allows for server-side assisted fast startup times, and Angular Progressive Web App (PWA) support takes advantage of native platform features such as caching and offline

- Always check https://caniuse.com/ before getting too excited about a new web technology to ensure that you are indeed able to use 

- http://Angular.io started using http://StackBlitz.io for interactive code samples
    
- accelerate setup workstation 
    + Vagrant – Provides a setup environment for a workstation that is easy to configure, reproducible, and portable.
    
    It stands on the shoulders of giants. Machines are provisioned on top of Virtual Box, VMware, AWS, or any other provider
    
    Then we can use Chef, puppet to automatic install software based on configuration 
    
    demo, All the files I use are in a GitHub repository https://github.com/vishwas-parameshwarappa/vagrant_demo
    
    + Chocolatey – is a single, unified interface designed to easily work with all aspects of managing Windows software using a packaging framework that understands both versioning and dependency requirements.
    
    + Boxstarter – Leverages Chocolatey packages to automate the installation of software and create repeatable, scripted Windows environments while providing reboot resiliency, windows customization, remote installations and automated windows updates.

    + references 
    https://www.vagrantup.com/
    https://chocolatey.org/
    http://boxstarter.org

- Optimizing VS code for angular 

.vscode / settings.json {
    "editor.tabSize": 2,
    "editor.rulers": [90, 140],
    "files.trimTrailingWhitespace": true,
    "files.autoSave": "onFocusChange",
    "editor.cursorBlinking": "solid",
    "workbench.iconTheme": "material-icon-theme", // Following setting                                                requires Material Icon                                                    Theme Extension  "git.enableSmartCommit": true,  "editor.autoIndent": true,  "debug.openExplorerOnEnd": true,  "auto-close-tag.SublimeText3Mode": true,      // Following setting                                                requires Auto Close Tag                                                       Extension  "explorer.openEditors.visible": 0,  "editor.minimap.enabled": false,  "html.autoClosingTags": false,  "git.confirmSync": false,  "editor.formatOnType": true,  "editor.formatOnPaste": true,  "editor.formatOnSave": true,  "prettier.printWidth": 90,                 // Following setting requires                                                    Prettier Extension  "prettier.semi": false,  "prettier.singleQuote": true,  "prettier.trailingComma": "es5",  "typescriptHero.imports.insertSemicolons": false, // Following setting                                                    requires TypeScriptHero                                                           Extension  "typescriptHero.imports.multiLineWrapThreshold": 90,
}

.vscode / extensions.json {
    "recommendations": ["johnpapa.angular-essentials", "PKief.material-icon-theme", "formulahendry.auto-close-tag", "PeterJausovec.vscode-docker", "eamodio.gitlens", "WallabyJs.quokka-vscode", "rbbit.typescript-hero",
        "DSKWRK.vscode-generate-getter-setter", "esbenp.prettier-vscode"]
}

- understand reactive programming 
    + event driven programming, define a event handler and attach it to an event source 
    onClick()='confirmSave()'
    
    + publish subscribe pub/sub pattern is a different type of event driven programming 

    All these events can happen asynchronously; however, the fetchDetails and showToastMessage functions will be receiving more data than they really need, and it can get really convoluted to try to compose these events in different ways to modify application behavior.

    updated data -> {
                        updateCache()
                        fetchDetails()
                        showToastMessage()
                    }

    + In reactive programming, everything is treated as a stream. A stream will contain events that happen over time and these events can contain some data or no data. 

    You exert some control over this stream by applying the throttle function to it, so you only get updates every 250 milliseconds (ms). If you subscribe to this new event, every 250 ms, you will receive a list of click events. we can use the filter function to only act on what is essentially a double-click event. 
    

# Prepare app for production release 
- run unit and e2e test, Karma Runner showing Jasmine Unit Test Results
$ npm test 

Async callback was not invoked within timeout specified by jasmine. Unit tests are designed to run in milliseconds

write automated acceptance tests (AAT) from the perspective of a user interacting with your application on a browse

    + e2e test, ensure that the npm test process is not running:
$ npm run e2e 

- guard against null data with *ngIf 
- containerize the app using docker 
- deploy the app on the web using Zeit Now which  is word wide web hosting vendor 
- debugging with vscode 
    + add launch.json 
{
    "version": "0.2.0",
    "configurations": [{swift
            "name": "npm start",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:5000/#",
            "webRoot": "${workspaceRoot}",
            "runtimeArgs": ["--remote-debugging-port=9222"],
            "sourceMaps": true
        }, {
            "name": "npm test",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9876/debug.html",
            "webRoot": "${workspaceRoot}",
            "runtimeArgs": ["--remote-debugging-port=9222"],
            "sourceMaps": true
        }, {
            "name": "npm run e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": ["${workspaceRoot}/protractor.conf.js"]
        }
    ]
}

    + pm start, npm test, or npm run e2e before you start the debugger
    
    + perform the action in the app to trigger the break point

- Containerizing the app using docker, copies the contents of dist folder from your development environment into the container's public folder

    + install docker 
        * window 
        ps> choco install docker docker-for-windows -y 
        
        * linux 
        $ brew install docker 

    + configure package.json for docker 
    + Install two development dependencies that are needed to ensure cross-platform functionality of the scripts
    $ npm i -D cross-conf-env npm-run-all

    + customize the pre-build script to execute unit and e2e test before building the image 
    "predocker:build": "npm run build -- --prod --output-path dist && npm test -- --watch=false && npm run e2e",

    + execute docker:publish in your terminal 
    $ npm run docker:publish
    
- npm scripts in VSCode, VS Code settings and ensure that the "npm.enableScriptExplorer": true property is present. 
- vscode docker extension, If you have installed the PeterJausovec.vscode-docker Docker extension
- Zeit Now, https://zeit.co/now, is a multi-cloud service that enables real-time global deployments
- Staying up to date 
    + updating node 
    ps> choco uninstall node 
    ps> choco upgrade nodejs-lts 
    
    $ brew uninstall --ignore-dependencies node 
    $ brew upgrade node 
    
    + updating npm and global packages 
    
    + update angular 
    + addressing security vulnerabilities 
    + update web server 
    
- n-Node version manager 
$ npm install -g n 

- npm upgrade 
$ npm-windows-upgrade 
    
- using angular update guide 
http://update.angular.io 

- post update checklist 
    + build and smoke test your app 
    + commit changes 
    + ensure CI is green 
    + manual test by a QA team 
    + collect performance data 


# Enhance angular app with angular material 
- Angular Material supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.

- other project, PrimeNG, found at https://www.primefaces.org/primeng, or Clarity, found at https://vmware.github.io/clarity, 

- manually install 
$ npm install @angular/material @angular/cdk @angular/animations hammerjs

- automatically install 
$ npx ng add @angular/material

- components 
@angular/material, official material 2 library 
@angular/cdk, peer-dependency, not directly use unless intend to build own components 
@angular/animations 
hammerjs, enable gesture support 

- import theme 
- angular flex layout 
 https://github.com/angular/flex-layout/wiki

$ npm i @angular/flex-layout


# Reactive forms and component interaction 
- two way binding and template driven forms, reactive forms 
- MockFlow WireFramePro, https://mockflow.com, as an easy-to-use, capable, and online tool that supports Material design UI elements
- Balsamiq is the better-known wireframing tool. However, https://balsamiq.com doesn't offer any free usage
- the wireframing tool support add interactive actions 

- add form control 
    + Input as documented at https://material.angular.io/components/input
    
    + template driven form,  form logic is mostly inside the HTML template. I'm personally not a fan of this approach, because it is harder to test these behaviors
    
    You can read more about ngModel at https://angular.io/api/forms/NgModel.
    
    + reactive, The behavior of Reactive forms is driven by TypeScript code written in the controller. This means that your validation logic can be unit tested
    Reactive forms at https://angular.io/guide/reactive-forms

- reactive form requires three levels of controls 
FormControl 
FormArray 
FormGroup 

the FormBuilder object is used to more easily orchestrate and maintain the actions of a FormGroup

- component interactive 
    + global events 
    rxjs/Subscription 
    
    + child-parent communicate with event emitters 

src / app / city - search / city - search.component.tsimport {
    Component,
    Output,
    EventEmitter
}
from '@angular/core' export class CitySearchComponent implements OnInit {
    ... @ Output()searchEvent = new EventEmitter < string > ()...this.search.valueChanges.debounceTime(1000).subscribe((searchValue: string) => {
            if (!this.search.invalid) {
                this.searchEvent.emit(this.searchValue)
            }
        })...
}

src / app / app.component.tstemplate: `  ...    <app-city-search (searchEvent)="doSearch($event)"></app-city-search>  ...` export class AppComponent {
    currentWeather: ICurrenWeather constructor() {}
    doSearch(searchValue) {
        const userInput = searchValue.split(',').map(s => s.trim())this.weatherService.getCurrentWeather(userInput[0], userInput.length > 1 ? userInput[1] : undefined).subscribe(data => this.currentWeather = data)
    }
}

    + parent-child with input binding 
src/app/current-weather/current-weather.component.ts
import { Component, Input } from '@angular/core'
...
export class CurrentWeatherComponent implements OnInit {
 @Input() current: ICurrentWeather
 ...
}

src / app / app.component.tstemplate: `  
...    
<app-current-weather [current]="currentWeather"></app-current-weather>  
...

    + sibling interactions with subjects RxJS.Observable, Observable.RxJS.Subject 
src / app / weather / weather.service.tsimport {
    Subject
}
from 'rxjs'...export class WeatherService implements IWeatherService {
    currentWeather: Subject < ICurrentWeather > ...
}

currentWeather.subscribe(data => (this.current = data))currentWeather.next(newData)
    
    there are three types of subjects
        * ReplaySubject, remember and cache all datapoints 
        * BehaviorSubject, remembers only the last data point 
        * AsyncSubject, one-time only events that are not expected to reoccur 
    
- Create a router first line of business app 


# Angular Cheat Sheet 
- 


# Router-first architecture 
- Router-first app architecture leveraging stateless data-driven components using RxJS SubjectBehavior
- implementation should concern 
    + define user roles early 
    + design with lazy loading in mind 
    + implement a walking-skeleton navigation experience 
    + design around major data components 
    + enforce a decoupled component architecture 
    + differentiate between user controls and components 
    + maximize code reuse 
    
- create a router first app 
$ npx @angular/cli new lemon-mart --routing

- configuring angular.json and package.json 
    + modify angular.json, tslint.json 
    + install prettier 
    $ npm i -D prettier 
    
    + add prettier to package.json 
    
    + configure develoment serve port to other 
    + add standardize script update start and build scripts 
    + add npm scripts 
    + establish dev norms 
    $ npm i -D dev-norms 
    
    then 
    $ npm dev-norms create 
    
    + execute 
    $ npm run standardize 
    
- identify site map 

shown at https://sitemap.mockflow.com

- generate component and specify their target routing capabilities 
$ npx ng g m manager -m app --routing

- generate favicon, using a tool such as https://realfavicongenerator.net

- Augury is a Chrome Dev Tools extension for debugging and profiling Angular applications.

    + Component tree 
    + router tree 

    + Lazy loading is achieved via a clever trick that avoids using an import statement. A string literal with two parts is defined, where the first part defines the location of the module file, such as app/manager/manager.module, and the second part defines the class name of the module


# Continuous integration and API design 
- Swagger is perfect to address API design, documentation, and testing needs. https://swagger.io/
- CI with CircleCI 
- API design with swagger 
- Newer versions of Docker have a great feature called multi-stage builds, which allow you to define a multi image process in an easy-to-read manner and maintain a singular Dockerfile

- debugging build environment 
$ docker run -it duluca/minimal-node-build-env:8.9.4 /bin/bash

- configure headless browser wit protractor 
- Create a CircleCI account at https://circleci.com/
- Code coverage report, $ npx ng test --browsers ChromiumNoSandbox --watch=false --code-coverage
- You may create RESTful endpoints or use the next-gen GraphQL technology. http://www.draw.io
- using yaml to define the API 
- design authentication and authorization 
    + UX design 
    + token-based authentication
    JSON Web Tokens implement IETF industry standard RFC7519, found at https://tools.ietf.org/html/rfc7519.
    
    + conditional navigation
    + side navigation bar 
    + reusable UI service for alerts 
    + caching data 
    + JSON web tokens 
    + angular HTTP interceptors 
    + router guards 


# Highly available Could Infrastructure 
- navigating to https://console.aws.amazon.com, create aws account 
- securing secrets 
    + always using a VPN service on public WI-Fi such as http://www.tunnelbear.com 
    + leverage the .aws/credentials file located under your user's home create profile and store access keys 
    + create .env file 

- It is clear that our NGINX server will give us the best bang for our buck. Armed with an optimal solution, let's deploy the application on AWS.
- AWS Elastic Container Servcie Fargate is a cost effective where you publish your docker image 


# Google Analytics and advanced cloud ops 
- Google analytics 
- Google tag manager, Sign in to Google Tag Manager at GoogleTagManager.com

 Google Tag Manager events, triggers, or tips and tricks, I recommend that you check out the blog by Simo Ahava at http://www.simoahava.com.
- Budgeting and scaling 
- Advanced load testing to predict capacity 
- Custom Analytics events 
- Search Engine Optimization (SEO) is an important part of Analytics. To gain a better understanding of how crawlers perceive your Angular site, use the Google Search Console, found at https://www.google.com/webmasters/tools
- To work with these more advanced features, I would recommend that you check out angulartics2, which can be found at https://www.npmjs.com/package/angulartics2. angulartics2 is a vendor-agnostic analytics library for Angular