Guide

Frontend

I have been asked that what are the resources I use to keep me up to date in the world of front end or even the world of dev.
I think medium.com is a awesome place that full of good and ‘up to date’ contents in the dev world.
Famous publication on medium.com like ‘freecodecamp’, ‘hackernoon’ all worth to check out.
Tags on medium.com like ‘Angular’, ‘Front End Development’, ‘Front End Web Development’, ‘Frontend’, ‘JavaScript’, ‘Web Development’ definitely worth to be followed.

Just saw this post yesterday, which is also useful.
https://hackernoon.com/the-best-youtube-channels-for-developers-4a08677f1ac1
I have learned a lot about frontend dev from the courses and videos provide by Wes Bos and Scott from LevelUpTuts.

Angular

https://blog.angular.io/
https://github.com/angular/angular/blob/master/CHANGELOG.md
Highly Recommended seperate your application into different ngModules which being ‘imported’ into the app.module.
NgModule Guide on angular.io describe what ngModule do, what are the different types of ngModule, what should be put into different types of ngModule.
http://angular.io/guide/ngmodule
Good example I found is the sample application on
http://angular.io/guide/router
(Also please do not create ‘one page’ component.
Make sure you do have a look at the design or wireframe of the screen, think about how to seperate the page to be small components.)

Angular Modules

• We create Module first
• Test, build, publish to our npm server.
• Then create web application
• npm install the module in the web application, import those modules into app.module.ts of the web application afterwards.
  So we can reuse modules on different web applications.

Primeng + Ultima

We use primeng ui libaray
https://www.primefaces.org/primeng/#/
https://github.com/primefaces/primeng
Ultima CSS Theme
https://www.primefaces.org/ultima-ng/#/
Alternatives
https://www.angularjs4u.com/angularjs2/angular-2-admin-dashboards/
Also a few ui librares on
https://angular.io/resources

How to create a module:

Requisite knowledges:

• Javascript/ECMAScript 5
• ECMAScript 2015/6, ESM (babeljs.io), UMD
• Typescript
• @NgModule
• Tooling: Systemjs, Webpack, Rollup
• npm install and publish, npm scripts, package.json
• AOT and Treeshaking,AOT vs JIT, tsc, ngc, @angular/compiler

We create Angular Module based on a PR of Angular/Angular on github.
PR: https://github.com/angular/angular/pull/16486
Guide: https://github.com/angular/angular/blob/fe1d5c9db10ad8d09decbc9bab7ae2b191dc5cf3/aio/content/guide/third-party-lib.md
Seed-project:
Please spend time to play around with this seed.

1. Change your local to use NPM server
   run ‘npm config set registry’
   run ‘npm config get registry’ to confirm.

2. cd your-module

3. rm -rf .svn # Linux or OS/X (bash)
   rd .svn /S/Q # Windows

Change the README file to be the description your module.

1. Replace ‘quickstart-lib’ everywhere to be your-module’ in the project.
   Rename ‘quickstart’ in package.json in the root folder to be module name.
2. Replace ‘LibModule’ everywhere to be the module name you want in the project.
3. delete lib.component.ts, lib.component.spec.ts, lib.component.html, lib.component.css files
   delete import statment and entry of ‘LibComponent’ from module.ts and index.ts
   (or rename all ‘lib.component’ to be the name of the file you created for your component, rename ‘LibComponent’ to be the class name of your component , and dont forgot to rename it inside of module.ts and index.ts )
4. delete lib.service.ts, lib.service.spec.ts files
   delete import statement and entry of ‘LibService’ from module.ts and index.ts
5. run ‘npm install’ to download angular libraries and third party dependencies.

6. Adding more Angular or third party dependencies.
   1). e.g. npm install @angular/forms@4.2.6 —save-dev (we currently lock all angular libraries to be version 4.2.6)

   2). open package.json, copy the library entry you have installed inside of devdependencies to peerdependencies.
   https://nodejs.org/en/blog/npm/peer-dependencies/
   3). Adding entry inside of the ‘map’ property of your-module\trunk\src\demo\systemjs.config.js for the demo site to use.
   For third party denpendency, need to add an entry inside of ‘packages’ property as well.
   e.g.

   thirdpartylibrary: {
   defaultExtension: 'js'
   },

which means import statements like

import { whatever } from 'thirdpartylibrary';

will find code files based on the ‘packages’ property settings inside of the location which based on the ‘map’ property settings of the systemjs.config.js.

To understand the configs inside of systemjs.config.js
https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

1. Now you can do angular dev work inside of lib folder. (Create sub ngModules, components, services, pipes and directives inside of lib folder)
2. We use the small Ng application inside of the demo folder to test the module you create.

If the step 5 works fine, the module you created already being imported into the demo application.
Feel free to use components, pipes and directives you created in the demo application for testing.

1. run ‘npm start’ , Demo site will be served, time to test your work.

2. We use another small Ng application inside of the integration folder for testing the process from
   1). build your module
   2). generate build output inside ./dist folder
   3). cd into integration, npm install the build output from ./dist folder to this integration testing site.
   which is the same process for using the module you created on the web application.
   4). run e2e test for both JIT and AOT.
   (e2e testing scripts inside of ./integration/e2e/)

   ( 0. Dont forgot import your module into the integration site, using components, pipes and directives you created inside of integration site.)
   Run “npm run integration” for triggering this processs.

Please read ‘scripts’ part of package.json in the root folder plus the ‘scripts’ part of package.json in the integration folder to understand.
More details can be found on the README.MD inside of integration folder.
Difference between ‘demo site’ and ‘integration site’

• Demo site using the code inside of lib folder.
• Integration site npm install the build output inside ./dist folder.
  Guide for AOT
  https://angular.io/guide/aot-compiler
  https://angular.io/guide/metadata

1. run ‘npm run release’
   1). npm version patch 1.0.0 -> 1.0.1
   npm version minor 1.0.0 -> 1.1.0
   npm version major 1.0.0 -> 2.0.0
   2).&& npm run build -> node build.js -> build the module and package.json will be copied to ./dist/.
   3). && node ./tools/cleanup.js -> delete the ‘scripts’ and ‘devdependencies’ of the package.json inside the ./dist/
   4). && npm publish ./dist” -> publish everything inside ./dist/ as a npm/node package to npm server.

To confirm the package has been published to npm server, access ‘http://packages/‘

1. for authorization or authentiation issue of the npm server for ‘npm publish’
   run ‘npm adduser’
   type username and password.
   devsolid-mumps

2. We dont checked in node_modules folder for modules.
   Please ‘svn ignore’ the node_modules folder.
   More details about svn, please ask Dmitriy.

3. We use angular-cli to create Ng Web Application.
   run ‘npm install your-module@X.X.X —save’
   We checked in all node_modules folder on SVN server just for Ng web application.

NPM Server

https://github.com/rlidwka/sinopia
https://github.com/verdaccio/verdaccio
proget
nexus

ngrx

https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/

Performance Improvement

lazy loading module + preloading module + aot + treeshaking

PWA for web application running in mobile devices.

pwa check list
PWA - progress web app - google

Resources

https://github.com/AngularClass/awesome-angular

Style Guide

https://angular.io/guide/styleguide

Courses

https://www.udemy.com/user/maximilian-schwarzmuller/
https://www.udemy.com/user/moshfeghhamedani/

Tooling

• emmet
• Totally Tooling Tips(https://www.youtube.com/playlist?list=PLNYkxOF6rcIB3ci6nwNyLYNU6RDOU3YyL)
• cmder(alias samples)

  al=subl D:\cmder\config\user-aliases.cmd
  clone=D: $t cd D:\MyProject\ $t md $1 $t cd $1 $t git clone https://github.com/$1/$2 $t cd $2 $t subl .
  gs=git status
  gsb=git status -sb
  gaa=git add .
  gcmsg=git commit -m "$*"

Javascript

douglas crockford youtube videos
you don’t know js

ES 6

http://exploringjs.com/es6/
https://es6.io/
https://babeljs.io/learn-es2015/
(es 6 = es 2015)
(es 7 = es 2016)
(es 8 = es 2017)

Typescript

https://www.typescriptlang.org/
(Typescript is not C# , Typescript is not Java, Typescript will be compiled to Javascript)