JSVidCon 2020 – Live Blog

JSVidCon is a virtual conference where developers from all over the world can share and gain knowledge on four frontend frameworks such as Angular, Vue.js, React.js and Node.js. All the four tracks will happen parallely.

The live blog of this event starts at May 7th, 2020 at 2 PM GMT+0.

Stay tuned.

The Angular Jamstack w/ Scully

14.00 – 14.30 – Aaron Frost

Aaron Frost kick-started JSVidCon 2020 – Angular Track by sharing his thoughts on Scully. He’s gonna cover about Angular Jamstack w/ scully. The main goals of Jam Stack are,

The main goals of JAMStack is same as that of scully.

The size of index.html gonna increase from 1KB to 26KB, if your are gonna use scully but he says it’s going to faster. The main objectives of scully are,

• Find all your routes (Router Plugins)
• Generate all the pages (Renderer Plugins)

Frosty jumpled onto a demo to explain about the router plugins. To add scully into your project just run the below command.

ng add @scullyio/init

To run scully use the below command

npm run scully

To run serve command in scully

npm run scully:serve

You have to do some configuration of routes which has some parameters such as donuts/:donutid. Woah!Scully is faster.

That’s a cool demo.

You can create your blogging site using scully with the below command.

ng g @scully/init:blog

Scully works if you also disable JavaScript. Yeah! That’s awesome! Thanks for the session. That was very informative Frosty!

Angular Elements for Authentication: The what, the how and the why

14.30 – 15.00 – Ana Cidre

The next session was started by Ana Cidre sharing her thoughts on Angular Elements for Authentication. She started of with a question. What do web components consist of?

• HTML template
• Custom Element
• Shadow DOM

She started of creating a dumb component. She’s mentioning that styling is very much important in a web component. You can use custom variables property in css of a web component.

She’s explaining about CSS Shadow parts ::part() but it is not supported by most of the browsers.

She’s explaining about how to create Angular Custom Elements with HTML Template, Shadow DOM and custom CSS.

ngx-build-plus allows you to generate bundles of small size of the respective angular elements. Thanks to Manfred Stayer for this library.

What is Authentication? The process of confirming an identity. The authorization happens after authentication.

Some of the advantages of web components are,

• Easy to implements
• Lot of flexibility. (For example – You can define the input attributes to the respective component)
• Flexibility to Styling and CSS Custom properties

She’s jumps onto a demo to show us how we can integrate authentication in the respective angular application. To explore about this demo, you can checkout the below GitHub repository.

Next up she’s explaining how we can integrate this web component in our respective angular project.

What tools can be used to create Web Components?

• slim
• stencil
• skate
• Lit

Wow! all the browser supports Web Components. That’s a good news. Thanks for the session Anna Cidre.

Sustainable Angular-Architectures with Nx Monorepos and Strategic Design

15:00 – 15:30 – Manfred Stayer

-The nest session was started by Manfred Stayer sharing his thoughts on Angular Sustainable Architectures. He starts off with a question.

What do we need for a good architecture?

He started to share his ideas on Domain Driven Architecture.

The main two principle of Domain Driven Design are

• Strategic Design – Decomposing a system
• Tactical Design

Each and every part will be tightly coupled in DDM.

The next we are going to explore about MonoRepos. Extensible Dev Tools can be used to create MonoRepos.

The application can be architect-ed as,

• Create a separate for separate domains
• Each can be independent of each other.
• The first part is to create a feature library
• API’s of respective domain can communicate with other features of the domains.
• The second part is creating the dumb UI components.
• The next one is the domain layer which has some business logic.
• The last part will be the utility layer.

Isolate your domain.

He jumps onto action to show us the architecture of the respective application. It looks clean and neat.

The advantages of creating finegrained libraries are,

• Unit of recompilation
• Unit of retesting
• Access restrictions
• Information hidings
• Alternative to NgModules
• Ng g lib – Creating a library statement

That was a good session. Thanks for sharing.

Rethinking Cross-Platform

15:30 – 16:00 – Mike Hartington

The next session was started by Mike Hartington by sharing his thoughts on Cross-Platform. What are the native SDKs released initially during cross platorm SDKs?

The main aim of SDK’s are Write once, run anywhere. He is sharing his thoughts on how native web apps built initially. And also mentioning about the disadvantages of doing it.

He also mentioned about some downsides for creating native apps.

• Custom tooling for everything
• Volatile Native Projects
• Overall Project health

We have React Native to build native web apps. The below code is an example of hello world program in reactive native.

The downsides of using React Native are,

• Corporate driven development
• Smaller Community
• Varying quality of plugins
• A lot of native knowledge is needed

He jumps onto a demo to show us about Ionic. Thanks for the session. That was very informative.

The Rise of a new Engine: Angular Ivy

16:00 – 16:30 – Martina Kraus

The next session was started by Martina Kraus sharing her thoughts on the rise of a new Engine, Angular Ivy. So she started of mentioning that Performance is an importat aspect of an web application.

Using Ivy it has improved a lot.

The main important part of a web app is JavaScript. Initially View Engine was very bad to lad these JS files but Ivy works like a charm.

So why do we need a compiler?

Some of the additional features in Ivy are

• Scoping
• Evaluation of Proeprty/Variables/ Type Shceking etc.

Using Ivy the bundle size is vastly reduced.

Below is the hello world app size. That’s awesome!

She jumps onto the demo to show us what exactly reduces the bundle size. The files after compilation looks understandable and also looks much simpler. And also the number of files generated after compilation is being lesser in IVY rather than View Engine.

View Engine is not tree shakeable but Ivy is tree shakeable.

So why faster compilation in IVY?

• It’s just single file compilation
• Component has all information for being compiled

Easier to Debug in IVY

• Simpler stack traces
• new ‘ng’ object can be accessed in developer console
• Backwards Compatibility – Provides two compilers(Ngtsc and Ngcc)

That was very informative session about Angular Ivy.

Understanding the New Injector

16:30 – 17:00 – Eliran Eliassy

The next session was started by Eliran Eliassy sharing his thoughts on New Injector.

So What are Injectors?

You can create or inject providers. In Angular 9 there are two new providein levels introduced. They are any and platform.

He jumps onto a demo to show us the behavior of Injector.

That was a cool demo. That was great session. Thank you.

Angular DOM Manipulation Techniques in Depth

17:00 – 17:30 – Nir Kaufman

The next session was started by Nir Kaufman sharing his thoughts on Angular DOM Manipulation Techniques.

She started of mentioning that we call it as View Manipulation rather than DOM Manipulation. Bascially class + template comprises of View.

There are two types of views.

In Angular we don’t manipulate DOM’s, we manipulate Views. He jumps on to a demo to show us how to manipulate views.

From the demo, the elements can be removed from DOM but not from the View Ref.

Use the right API to remove elements from the View.

Thanks for the awesome session. It was very informative.

The Phantom of the App: Background Services

17:30 – 17:45 – Maxim Salnikov

-The next session was started by Maxim Salnikov sharing his thoughts on Background Services. So why Background Services?

What is a Background Service?

• Runs in a parallel thread
• Had independent lifecycle
• Initiated by particular events

Service worker does the magic for us.

He is explaining about the Background Sync API’s. You can also write code for periodic background sync. It looks simpler.

So what’s the timing range in chrome? Minimal is 36 and maximum is 12.

Thanks for the session Maxim.

Build Your Own Builder

17:45 – 18:00 – Shmuela Jacobs

The next session was started by Shmuela Jacobs sharing her thoughts on building our own builders. Builders are something which you can use to build your angular application and also you can create your custom builders based on the builders API.

What can you do with builders?

She’s explaining about how to run builders and what are all the changes that needs to be done in angular.json

Below commands can be used to run builders.

ng add builders-demo

ng run project:target-name

Follow are the passing options of builders.

ng deploy allows you to deploy application to the respective cloud providers.

That was a great session. Thank you.

The State of Angular

18:00 – 18:30 – Minko Geschev

The next session was started by Minko Geschev sharing his thoughts on the state of Angular. He started of the session mentioning that V9.1 is out.

Ivy has been one of the major release in 9.1

He mentioned some interesting points of static and dynamic systems.

Static:

• Greate Compile time optimizations
• Excellent IDE/Text editor support
• Strict Type Checking
• Source Code Visualization

Dynamic:

• Lazy Componet Loading
• Dynamic UI assembling
• Fast Builds

And finally Angular now supports Static and Dynamic systems.

What are the advantages in V9.0?

• Faster Builds – -40%
• The smaller Bundle size
  • Less generated code
  • Smaller Framework
    • Tree Shakeable instructions
    • No need for ngfactory machinery

• Imporved i18n
• Focused on static optimizations
• Angular Universal Improvements
• Deployment has been vastly improved

Now Angular supports JAMStack. That was very awesome. Thanks for the talk!

Unveiling the Secrets of Angular Schematics

18:30 – 19:00 – Amadou Sall

The next session was started by Amadou Sall sharing his thoughts on the secrets of Angular Schematics. He started his session by explaining about the architecture of Angular CLI. It allows you to

• Ensure your code is free from defect
• Enforcing coding standards
• Developing locally
• Building for the browser
• Deploying our applications

The second set of problems are,

• Scaffolding a new project
• Generating new code
• Adding a library
• Fixing braking changes

To solve this angular cli problems, it uses seom underlying tools such as,

The cool thing of Angular CLI, it is extensible. In Angular you can also create your own schematics.

He is explaining about some use cases of generic schematics. He jumps onto a demo to show us how we can build our own schematics.

That was a very cool demo. Thanks for sharing.

Technical SEO for JS web apps – a hands-on session

19:00 – 19:30 – Martin Splitt

The next session was started by Martin Splitt sharing his thoughts on Technical SEO for JS Web Apps. He started off with mentioning about SEO.

What search engines do roughly?

What you want?

Potential new users fund your content

What search engines want?

Show relevant content to users

What good SEO does?

Make your content relevant & discoverable

He’s currently explaining about showing the right set of information to the users

Now when coming to technical SEO Side

• We need URL’s
  • Good, normal URL’s
    • example.com/traditional-url/
    • example.com/page#subsection
  • SPAs using fragment URLs to load different views
    • example.com/#about
    • example.com/#!about
  • Best Practice? Use the History API
    • example.com/home
• Links ftw
  • Good way – <a href = “/stuff”>Yes good link</a>
  • Bad way – <a onclick=”goto(‘stuff’)”>Please don’t</a>

Googlebot’s renderer is evergreen and also it supports Web Components.

You can lazy load images in chrome. Some of the useful tools,

Thanks for the awesome session.

Top 10 tools loved by Angular Developers

19:30 – 20:00 – Marta Wiśniewska

The next session was started by Marta Wisniewska sharing her thoughts on top 10 tools loved by Angular Devs. I agree on the below image.

What are the responsibilities of a developer?

• select proper solutions
• making app reusable and scalable
• taking care about performance
• Environment setup & config
• Write unit tests
• Debugging
• Building and deployment

#1 Angular CLI

#2 Augury

It is basically,

• Browse extension
• works with applications in debug mode
• browser support: Chrome & Firefox
• can present application structure, change detection etc.

#3 UI Libraries and Components

Some of the useful libraries and components are,

• Angular Material
• ngx-admin
• ngx-datatable
• ngx-charts

#4 Storybook

A story book is used for,

• user interface development environment
• provides a sandbox to build UI
• open source
• collection of store id where each story represent a single state of a component

#5 Bit.dev

It is a,

• CLI tool to build and reuse components
• directory with ready-to-use components
• great way to cross project integrations
• good for collaboration

#6 Tools for speed

Some of the tools for speed are,

• ngx-loadable
• @herodevs/hero-loader
• ngx-quicklink
• guess.js

#7 Codelyzer

It is used for,

• static analysis for Angular projects
• set of tslint rules
• possible to install in Angular project

#8 Language Service

Extension that can be used across your project.

#9 compodoc

#10 Stackblitz

It is a ,

• tool for creating, updating & deploying apps in a browser
• real time reload
• no need to setup local env
• supports npm packages
• offline support

That was great set of tools. Thanks for sharing.

What Happens When You Cancel an http Request?

20:00 – 20:30 – Younes Jaaidi

The next session was started by Younes Jaaidi sharing his thoughts on What happens when you cancel an http request. He starts of by asking a question whether you have build an search engine.

When there are multiple search requests it becomes too heavy for the database and as well as for the API’s.

So he’s suggesting we’ll cancel all the requests and we’ll send only one request to the API. But it’s not a good idea. Let’s wait and watch how it can be solved.

We can use NestJS and RxJS to solve this issue.

He jumps onto a demo to show us how it can be done. The initial attempt didn’t work because we didn’t unsubscribe the observable of cancelled Http Requests.

So you can unsubscribe of the respective cancelled request by creating an interceptor. Now it works. The CPU and memory usage is fine.

It also can be done using respective DB’s. Think re actively to solve some good problems.

That was a great session. Thank you.

Framework-Agnostic Web Components Using Angular

20:30 – 21:00 – Nishu Goel

The nest session was started by Nishu Goel sharing her thoughts on Framework-Agnostic Web Components using Angular. She started off mentioning some useful reasons to go for web components.

Basically a web component can be built once and use it in all other frameworks/projects.

The web component specifications are,

• HTML Templates
  • Renders only when activated
• Shadow DOM
  • Encapsulated DOM
  • Scoped CSS
• Custom Elements
  • lynchain in the web components specifications

How to define a custom element?

• Reactions – life cycle hooks
• Properties – Input() & Property binding
• Custom Events – Output() & Event Emitter
• Attributes – Host Binding in Directives

How to install web components ?

npm install @angular/elements

npm install @webcomponents/custom-elements

Import statements in polyfills

And then mention encapsulation as ViewEncapsulation method. And then we have to register the web component in the module

Before Angular 9 entry component should be mentioned. But in Angular 9 its not necessary.

So how to use this package across frameworks?

Just use ngx-build-plus package to generate the bundle and it can be used across frameworks / projects.

She’s showing us how we can integrate web components with other frameworks. It looks simple and awesome.

Thanks for the session. It was very informative.

GraphQL, Apollo Angular & Magic!

21:00 – 21:30 – Daniel Tamir

The next session was started by Daniel Tamir sharing his thoughts on GraphQL, Apollo Angular and Magic.

What is GraphQL?

• Specification for an API
• Schema Driven
• Client Oriented
• Query Language
• Powerful Developer Tools

He jumps onto a demo to explain about GraphQL.

What is Apollo Angular?

To start using apollo in your angular app use the below command

ng add apollo-angular

That’s a cool demo of how we can use Apollo Angular. Thanks for the session. It was useful.

Angular & Google Maps

21:30 – 21:45 – Katerina Skroumpelou

The next session was started by Katerina Skroumpelou sharing her thoughts on Angular Google Maps.

Why Map?

• Maps are everywhere
• Maps are used to show data

GMP API’s are very much helpful but what come’s up with JS API

• Markers
• Visualization
• Drawing
• Geometry
• Places
• Styling
• Localization
• Elevation

How to add google maps to angular?

How to load the API?

Load the service and map using Viewchild .

What are spatial data?

You can create marker using google marker class. She jumps onto a demo to shows us how we can build maps using JS API’s. You can also do customization’s based upon your need.

Thanks you for the session.

Build an Ionic 5 Angular App in 15 minutes

21:45 – 22:00 – Daniel Zen

The next session was started by Daniel Zen sharing his thoughts on Ionic Framework.

What is Ionic?

You can also create cross platform mobile apps. Write once and run anywhere. It can integrate with Angular ,React, Vuewand Vanilla JS.

He jumps onto a demo to show us about how to build Ionic app. Thanks for the session.

Explore the power behind Angular CLI

22:00 – 22:30 – Santosh Yadav

The next session was started by Santhosh Yadav sharing his thoughts on the power begin Angular CLI.

What is Schematics?

Commands like ng add, ng generate are called as schematics.

What can you do with Schematics?

• Automate Installation
• Automate file creation/modification
• Automate creating application/libraries

How to write Schematics?

• Rule
• Tree
• SchematicContext

He jumps onto a demo to show us how to create schematics.

collection.json is one of the important file to define your schematics. To test your schematics you should run the below command.

Nextup he jumps onto to explain about Angular Builders.

And also he’s explaining about how we can create our own custom builders. That was a cool demo.

What is AST?

• AST is a Data Structure
• Used widely in compilers
• Represent the structure of the program
• Used during syntax analysis phase

Thanks for the session. It was very informative.

Tackling Componentstate Reactively

22:30 – 23:00 – Michael Hladky

The next session was stated by Michael Hladky started to share his thoughts on Tackling Componentstate Reactively. He starts off with a quote.

What are the different layers of state?

• Server State
• Client State
  • Persistent State
  • EphemeralState

He jumps onto a demo to show us when to subscribe and unsubscribe.

State Composition is cold by default! We rely on the consumer to start it.

He showed up some good number of demos with good examples. Thanks for the session. It was useful.

What I learned from looking at thousands of public Angular apps

23:00 – 23:30 – Stephen Fluin

The next session was started by Stephen Fluin sharing his thoughts on the lesson learnt from looking at thousands of public Angualr apps.

Data

• Where does depth come from?
  • Conversations
  • Analysis
• Where does breath come from?
  • Chrome Extension
  • Custom Tooling
    • Chrome headless
    • Load a page
    • Scan
      • JavaScript Loaded
      • Rendered DOM Tree
      • Evaluate runtime expressions

Worst Practices

• 3,923,509 – The Average Angular app requires 4MB of JS
• The average non-Angular app is 5% bigger than that
• The 15MB bundle – The bundle size is huge because of styles
• Moment locales
• Marketing JS
• 10% Apps not using compression

Best Practices & Recommendations

• Stay up-to date (ng update makes it easy to update your angular app)
• Consider SSR/Prerendering
• Lazy Load
• Source Map Explorer
• Mention Budgets in angular.json

Thanks for the session. It was very useful.

Building And Testing An Operator In RxJS

23:30 – 00:00 – Ben Lesh

The last session was started by Ben Lesh sharing his thoughts on building and testing an operator in RxJS. He directly jumps onto the code to explain about the actual usage of operators.

He started building his own rxjs operator which can be used across projects.

That was a good demo and that was very practical. Thanks for sharing.

So that’s a wrap. Thanks to JSVidCon for conducting this awesome event and thanks to all the speakers who shared their thoughts.

Gain Knowledge. Share Knowlege

Happy Coding!

Cheers!