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.
- User group information: FrankenJS
- Meetup event information: Angular & Beyond
Angular Performance Improvements by Gregor Biswanger
The Coca Cola recipe for performance in the browser
There are two threads running in the browser: the main thread and the composition thread. The main thread executes JavaScript and creates a bitmap from the DOM. The composition thread renders the bitmap. “Reflow” triggers like DOM change, CSS3 animations, user actions (events) will cause a new rendering to be triggered.
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()
- The Angular compiler turns HTML into optimized JavaScript and it can be used as JIT (Just In Time) or AOT (Ahead of Time, on build)
- Tree Shake with –build-optimizer
- Lazy Loading
- Change Detection on Push
Demystifying the Realtime Web by Srushtika Neelakantam
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.
State Management with Redux by Gregor Woiwode
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
Why modern JavaScript idioms are good for performance: Widening the fast-path of TurboFan builtins by Sigurd Schneider, Google
The JavaScript engine V8 powers Chrome and Node.js. It consists of the interpreter Ignition and the compiler TurboFan. TurboFan is used for optimization of hot code, e.g. for type feedback which is speculative assumption that is generated, but if the optimization turns out to be wrong then a decomposition is performed.
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.
How to structure huge Angular apps by webdave_de
The goals for our code are architecture, reusable and maintainable.
Recommended folder structure:
- app
- _shared
- features
- framework
App shell:
- navigation
- header
- container
Recommendations:
- 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.
Angular App Architecture by Manfred Steyer
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:
- Distribution
- Versioning: support old versions, conflicts.
- Decoupling
2. Monorepos
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
3. Microservices
Advantages:
- less complex
- less coordination
- different technologies
- separate dev/deploy
Disadvantages:
- UI composition
- distribution of data
- distributed system
You can do UI Composition with:
- Hyperlinks
- 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.
FitGeekGirl 
You must be logged in to post a comment.