It was my first time attending the FrankenJS meetup. I came across it in the meetup’s recommendations and I was super impressed with the next event so I decided to just register and go.
The meetup was free and it was at one of the best locations where I have been, in the New Museum. I wish I could’ve attended the Lab in the morning but I had to work. I left early from work so I can catch all the sessions in the afternoon. I summarized these sessions using my notes from the meetup.
The Coca Cola recipe for performance in the browser
Angular performance tips
- Use CSS position for animation
- Avoid iQuery (example webpage performance: 0.44 with jQuery vs. 0.005 native)
- Use transition
- ReactJS has a virtual DOM which gives a better performance. Angular has similarly the DOM abstraction API that is recommended to use, e.g. this.renderer.createElement()
- Tree Shake with –build-optimizer
- Lazy Loading
- Change Detection on Push
Realtime in the web means less than 100 ms. The options are HTTP, AJAX Polling or HTTP 2. The paradigm is push <=> pull using WebSockets. Using pub-sub (publish-subscribe) can be topic based or content based.
Realtime means no refresh, e.g. with the library Ably.Realtime. It can be used for gaming, chat, social, notifications and more.
Why, how and what
Bad code, less features and decreasing trust in the code. There are certain state management patterns that can be used. With the Redux architecture, you have a centralized state management (store), a client-side database and API. There are 5 types of app state: data, communication, control, session and location. You can install Redux from npm, ngrx.
Gregor posts new videos every week at angular-empowerement.club
e.g. x + 1 where we do not know if it is a number or a string
TurboFan can run into an infinite deopt loop which means failure to learn and it is a performance penalty.
Higher-order array builtins with array.reduce(), performance micro benchmark: 120 ms manual loop vs. 75 ms array#reduce. Don’t modify array in callback.
The goals for our code are architecture, reusable and maintainable.
Recommended folder structure:
- Every feature is its own module (Single Responsibility Principle) instead of:
- A module managing everything.
- A service managing everything.
- A component managing everything.
- A directive managing everything.
- Modules can be lazy loaded.
- You can use sub-module in sub-module…
- Components can be container or presentational.
- Logic in services or components:
- Services: reused logic, API calls, data management, all other logic.
- Components: logic for view
- Provide the service at the top-most point where used.
- The disadvantage of having many modules are long imports so instead you can use Path.
Modules can be in the root, feature and shared.
Enterprise-Architectures for huge Angular Applications
1. npm packages
Reusable logic, big architecture, using the Angular Package Format (ng-packagr). You end up with 2 package.json files: dev and production. Locale npm registry with TFS, Nexus, Artifactory, Verdaccio.
Advantages and disadvantages:
- Versioning: support old versions, conflicts.
Monorepos are similar to .sln in Visual Studio. Workspace = folder with projects that belong to each other. An advantage is the global node_modules. Other advantages:
- everyone uses the latest version
- no version conflicts
- no distributing libraries
- new library => new folder
- You can move back and forth between monorepo and npm registry.
You can have project monorepo or company monorepo (like at Google and Facebook).
You can use Nrwl Extensions for angular (Nx) at nrwl.io/nx:
- create nx-workspace
- ng generate app
- ng generate lib
- less complex
- less coordination
- different technologies
- separate dev/deploy
- UI composition
- distribution of data
- distributed system
You can do UI Composition with:
- SPA-based Shell with iframes: isolation but overlapping elements and lots of requests.
- Web Components + Shell: standard and custom elements but no framework support.
- Bootstrapping different SPAs + Shell
This is included in the Angular Elements which is currently experimental in Ng 6.