Presentation about the native browser way for building web components. We look at examples and the pros and cons of doing it natively and using a library. At the end we look at the Angular way of wrapping custom components into Custom Elements.
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
The document provides an introduction to ReactJS, including:
- ReactJS is a JavaScript library developed by Facebook for building user interfaces.
- It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered.
- Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen.
- The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().
CSS3 is an update to the CSS2.1 specification that introduces many new features and modules. Some key CSS3 modules include selectors, backgrounds and borders, text effects, transformations, transitions, multiple columns, and user interface. CSS3 allows for rounded borders using border-radius, box shadows using box-shadow, and image borders using border-image. Other CSS3 properties include text-shadow, word-wrap, transforms like rotate and scale, transitions for animated effects, multiple columns layout, and user interface features like resizing and outlines. Support for CSS3 varies across browsers.
This document is a presentation about JavaScript that covers what JavaScript is, where it came from, and what it can do. It introduces JavaScript as a scripting language that is easy to use and learn and runs in web browsers. The presentation explains that JavaScript is unrelated to Java but borrows some naming conventions. It provides overviews of JavaScript basics like variables, operators, and functions, as well as more advanced topics like objects, events, and DOM manipulation.
Vue comes with a simple and minimalistic core that is perfect for simple, single page applications that don't require heavy overheads. Vue works primarily on the ViewModel with two-way data bindings and is designed to be simple and flexible, allowing developers to mold the layer as they see fit.
The document provides an overview of JavaScript programming. It discusses the history and components of JavaScript, including ECMAScript, the DOM, and BOM. It also covers JavaScript basics like syntax, data types, operators, and functions. Finally, it introduces object-oriented concepts in JavaScript like prototype-based programming and early vs. late binding.
This was presented at Adobe's 'Ask the AEM Expert' Session. This session covered
Introduction to the core components
How to use and when to use the core components
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes.
- Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements.
- Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes.
- The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.
JavaScript is a scripting language originally designed for web browsers but now used everywhere. It has dynamic typing and supports object-oriented, imperative, and functional programming. JavaScript was created in 1995 and standardized in 1999. It is now the most popular language on GitHub. JavaScript can be used to build interactive web pages, desktop applications, server-side applications, IoT applications, and real-time applications. The core data types in JavaScript are Number, String, Boolean, Object, Function, Array, Date, and Regular Expressions. JavaScript supports features like variables, flow control, error handling, debugging, and JSON for data exchange.
The document discusses various best practices for writing JavaScript code, including placing scripts at the bottom of pages, using meaningful variable and function names, avoiding global variables, and optimizing loops to minimize DOM access. It also covers JavaScript language features like namespaces, data types, and self-executing functions. Finally, it mentions tools for linting, minifying, and bundling code as well as popular integrated development environments for JavaScript development.
ASP.NET MVC is a framework from Microsoft that separates an application's logic, presentation, and data access into three distinct components: models, views, and controllers. This separation of concerns makes the application easier to manage, test, and develop for large teams. ASP.NET MVC uses friendly URLs, does not rely on view state or server-based forms, and supports test-driven development better than traditional ASP.NET Web Forms applications.
This document provides an overview of Angular's template-driven and model-driven forms. It describes the key directives, classes, and interfaces used for building forms in Angular. It explains how to add validation, track form state, create custom validators, and tie forms to components and templates. The document also demonstrates how to set up two-way data binding between forms and models using directives like ngModel, ngFormControl, and ngForm.
This document provides an introduction to jQuery, covering its features, comparisons to other frameworks, selectors, and plugins. jQuery is an open-source JavaScript library that simplifies DOM manipulation, event handling, animations, and Ajax interactions. It uses CSS-style selectors to select and manipulate HTML elements. Some key features include DOM element selections, DOM traversal/modification, DOM manipulation based on CSS selectors, events, effects/animations, Ajax, and extensibility through plugins. The document also discusses jQuery versus other frameworks like Dojo and YUI, demonstrates basic selectors and methods, and encourages the use of plugins to add additional functionality.
What are Web Components and how we use them. What is Angular Elements and how can we package our angular components as custom elements and reuse them everywhere.
Demos: https://github.com/iliaidakiev/slides/
Backbone.js is a lightweight JavaScript framework that provides structure to client-side code through an MVC pattern. It connects a single-page application to a backend via RESTful JSON and allows fetching and saving data without full page refreshes. Backbone provides models to represent data, views to handle the UI, and collections to manage groups of models. Events allow views to update dynamically when models change. It aims to increase code organization and reuse while keeping the framework lightweight.
Web components allow developers to create reusable custom elements with encapsulated styles and markup. They include APIs for custom elements, shadow DOM, and HTML templates. Web components solve challenges like maintaining a consistent and unified UI across frameworks. Common problems are addressed through standards like custom elements, shadow DOM, and templates. Web components are supported across major browsers and offer benefits like portability, isolated styles, and execution speed.
The document discusses Knockout, a JavaScript library for building dynamic user interfaces. It provides an overview of Knockout's core concepts including declarative bindings, dependency tracking, and templates. It also describes common patterns for using Knockout such as MVVM and building views, view models, and models. Key bindings and functionality are defined including observables, computed observables, and observable arrays.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
Knockout.js is a JavaScript library that makes it easier to create dynamic and responsive user interfaces by binding a data model to HTML elements, automatically updating the UI when the data model changes. It provides declarative bindings, dependency tracking, templating, and other features to simplify building dynamic UIs using the MVVM pattern. Knockout.js works with any web framework, has no dependencies, and supports all major browsers.
This document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
Lift provides a concise framework for developing web applications in Scala with features like convention over configuration, clean separation of presentation logic and content, and powerful AJAX and Comet support. It leverages the Scala programming language and has a responsive community. Code is more concise in Lift, increasing developer productivity.
All of us having experience with other web frameworks such as Struts,Tapestry, Rails, etc would ask “Why another framework? Does Lift really solve problems any differently or more effectively than the ones we’ve used before? The Lift Web Framework provides an advanced set of tools for quickly and easily building real-time, multi-users, interactive web applications. Lift has a unique advantage that no other web framework currently shares: the Scala programming language. Scala is a relatively new language developed by Martin Odersky and his group at EPFL Switzerland. Scala is a hybrid Object Oriented and Functional language that runs at native speeds on the JVM and fully interoperates with Java code. Lift is a hybrid web framework built on Scala. Lift derives its features and idioms from the best of existing web frameworks as well as the functional and OO features in Scala. It compiles to Java bytecode and runs on the JVM, which means that we can leverage the vast ecosystem of Java libraries just as we would with any other java web framework. This presentation details the advantages of this Scala based Web framework over all the existing frameworks that we have used uptil now and shows a small sample application built with Lift. We will create a basic application with a model that maps to RDBMS, web pages that correspond to back end logic and bind dynamically created content to elements on the webpage.
This document provides an overview of jQuery, including how to download and include it in HTML, basic syntax, selectors, events, effects, DOM manipulation methods, AJAX functionality, and links for additional resources. It covers the core concepts like $(selector).action(), chaining methods, and using $(document).ready() to ensure the page is loaded before running scripts. Common selectors, events, effects, and traversal/filtering methods are demonstrated.
Will your code blend? : Toronto Code Camp 2010 : Barry Gervin
XAML getting you down? Tired of the repetition of trial by error WPF or Silverlight development? If you’re not using Expression Blend to build your XAML, you’re doing it all wrong. Let’s take a look at the common pitfalls that new Silverlight developers fall into that make their code unblendable, and then leverage the patterns and techniques that allow us to unlock the virtues of Expression Blend. Testability, blendability, inner peace and maintainability are just 1 hour away
This document discusses JavaScript frameworks and web components. It provides examples of code for Dojo, Ember, Angular, React, and jQuery. It also discusses the benefits of web components, including that they are part of the DOM, future-proof, and modular. Web components include custom elements, shadow DOM, templates, and HTML imports. Browser support is improving but not yet universal. Polyfills exist to provide support in older browsers. The web components specification has changed from version 0 to version 1 to support ES6 classes.
The document discusses jQuery, a JavaScript library. It provides information on:
- What jQuery is and its main functionality, including DOM scripting, Ajax, user interface effects, and form validation.
- How to get started with jQuery, including downloading the file, adding it to a page via a script tag, and using common selectors like ID, class, and tag name to select elements.
- Common jQuery methods for manipulating elements, like adding and removing classes, traversing the DOM, making GET/POST requests, and loading content via Ajax.
- Ensuring the document is ready before running jQuery code by using the ready function.
So in summary, the document provides an overview
- Talk from FrontConf Munich 2017
- https://frontconf.com/talks/09-12-2017/reactive-type-safe-webcomponents
Abstract:
You know the drill right? new cool framework/library appears... boom! new Datepicker in that framework follows and soon enough whole UI libraries, again and again....
It's 2017 and it's time to stop this madness once and for all! How you ask?
In this talk we will go through implementation of an app via vanilla web components and explore all the pain points with all these low level primitives that we have natively in the browser.
In the end we will build our custom super tiny reactive type-safe library which will allow us to build web components with a breeze
Write once, use everywhere by using the platform + abstraction for great Developer experience.
This document provides an introduction to HTML enhanced for web apps using AngularJS. It discusses key AngularJS concepts like templates (directives), controllers, dependency injection, services, filters, models, configuration, routing, resources and testing. Directives allow HTML to be extended with new attributes and elements. Controllers contain business logic. Dependency injection provides dependencies to controllers and services. Filters transform displayed data. Models represent application data. Configuration sets up modules. Routing maps URLs to templates. Resources interact with RESTful APIs. Testing ensures code works as expected.
This document discusses using pluggable applications with TurboGears2. It provides an overview of TurboGears2 features like object dispatch, declarative models, and XML template engines. It then demonstrates how to quickly start an application and explore options to add photo galleries, blogs, and wiki pages by plugging in additional applications and customizing templates and models.
Angular. State Management Problems. Redux. Understanding what is RxJS by comparing it to promises. Creating a simple app using ngrx/store and ngrx/effects. State Management Practices @ hillgrand.com.
This document provides an in-depth overview of Zone.js and how it works. It discusses:
- The event loop and how Zone.js intercepts asynchronous tasks like setTimeout and promises.
- How zones provide execution contexts and how Zone.js uses zones to observe and control code execution.
- How zones can be forked to create child zones and intercepted using hooks to monitor asynchronous tasks.
- How Zone.js monkey patches browser APIs and schedules tasks through the current zone rather than calling APIs directly.
Schedulers are a very powerful way of controlling the execution of the Reactive Extensions for JavaScript streams. In this presentation we examine the different types of schedulers and the different queues in the JavaScript runtime (Tasks and Micro tasks)
Deep dive into where Promises and Observables originate and why the Array.prototype.map function is called map. After understanding what functors and monads are we see the differences between Promises and Observables. Reactive Programming / Functional Programming
Unit Testing RxJS streams using jasmine-marbles. The demo shows how we can create a Web Component that uses NGRX/store + NGRX/effects like workflow and how we test our effect streams
Presentation about my experience in developing deterministic JavaScript Applications. Thoughts on Redux and problems surrounding it. And how finite state machines/statecharts can help us (xstate).
Demos Location:
https://github.com/IliaIdakiev/slides
State management for enterprise angular applications
This document discusses state management for enterprise Angular applications. It covers different state management approaches like Flux, Redux, and NgRx/Platform. It describes the types of data that need to be managed in applications. It also discusses layering concepts and different patterns for structuring application logic and state, including transaction scripts, domain models, and separating concerns with services. Reactive extensions and RxJS are presented as ways to manage asynchronous and reactive state changes.
Offline progressive web apps with NodeJS and React
This document provides an overview of progressive web applications (PWAs) and how to build them using service workers, the Cache API, and IndexedDB for offline functionality. It discusses key concepts like the service worker lifecycle, notifications, manifest files, and the Web Push API. The document also explains how to cache assets, handle network requests when offline, and store data locally using IndexedDB.
This document discusses testing RxJS observables using marble diagrams with Jasmine and Jasmine-Marbles. It introduces cold and hot observables, provides examples of marble diagram syntax for observables, subscriptions, and tests, and demonstrates how to test asynchronous RxJS code synchronously using the TestScheduler.
Predictable reactive state management for enterprise apps using NGRX/platform
Predictable reactive state management for enterprise apps using NGRX/platform:
@ngrx/store - RxJS powered state management for Angular applications, inspired by Redux
@ngrx/effects - Side Effect model for @ngrx/store to model event sources as actions.
@ngrx/router-store - Bindings to connect the Angular Router to @ngrx/store
@ngrx/store-devtools - Store instrumentation that enables a powerful time-travelling debugger.
@ngrx/entity - Entity State adapter for managing record collections.
Angular/NX Overview.
Angular Offline Progressive Web Apps With NodeJS
- Service Workers
- Application Manifest
- Cache API
- IndexedDB
- Notification API
- Web Push Protocol
- Real Time Communication
- HTTP/2
Introduction to Offline Progressive Web Applications
This document discusses offline progressive web applications (PWAs) and their advantages. It explains how service workers allow PWAs to work reliably offline through features like caching, push notifications, and background syncing. The service worker lifecycle of registration, installation, and activation is also outlined. The document provides details on using the Cache API and intercepting requests to serve cached content when offline. It discusses how application manifests and HTTP/2 improvements can make PWAs feel like native apps and load quickly.
This presentation includes: Reflective injection using TypeScript, Reflect Metadata, Zone.js, Dependecny Injection, Angular, Decorators, Decorator Factories and etc.
Overview of zone.js (Monkey Patching, Forking, Interception). How its used in Angular for triggering Change Detection and a demo in NodeJS for authentication handling.
All my slides and demos can be found here: https://github.com/IliaIdakiev/slides
This document provides an overview and introduction to Predictable Reactive State Management using NGRX. It begins with an introduction to the speaker and then outlines the schedule which includes topics like functional programming, RxJS, Angular change detection, Redux, and NGRX. It then discusses how functional programming concepts like pure functions, immutable data, and declarative programming relate to Angular and libraries like RxJS and NGRX. Specific NGRX concepts like actions, reducers, and selectors are introduced. Examples are provided for building an NGRX application with a single reducer handling the state updates. Additional resources are listed at the end.
JavaScript can dynamically manipulate the content, structure, and styling of an HTML document through the Document Object Model (DOM). The DOM represents an HTML document as nodes that can be accessed and modified with JavaScript. Common tasks include dynamically creating and adding elements, handling user events like clicks, and updating content by accessing DOM elements by their id or other attributes.
This session will be about maintaning the store on client side with redux, And will have more details about state management addressing single source of truth concept
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
The document provides an introduction to ReactJS, including:
- ReactJS is a JavaScript library developed by Facebook for building user interfaces.
- It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered.
- Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen.
- The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().
CSS3 is an update to the CSS2.1 specification that introduces many new features and modules. Some key CSS3 modules include selectors, backgrounds and borders, text effects, transformations, transitions, multiple columns, and user interface. CSS3 allows for rounded borders using border-radius, box shadows using box-shadow, and image borders using border-image. Other CSS3 properties include text-shadow, word-wrap, transforms like rotate and scale, transitions for animated effects, multiple columns layout, and user interface features like resizing and outlines. Support for CSS3 varies across browsers.
This document is a presentation about JavaScript that covers what JavaScript is, where it came from, and what it can do. It introduces JavaScript as a scripting language that is easy to use and learn and runs in web browsers. The presentation explains that JavaScript is unrelated to Java but borrows some naming conventions. It provides overviews of JavaScript basics like variables, operators, and functions, as well as more advanced topics like objects, events, and DOM manipulation.
Vue comes with a simple and minimalistic core that is perfect for simple, single page applications that don't require heavy overheads. Vue works primarily on the ViewModel with two-way data bindings and is designed to be simple and flexible, allowing developers to mold the layer as they see fit.
The document provides an overview of JavaScript programming. It discusses the history and components of JavaScript, including ECMAScript, the DOM, and BOM. It also covers JavaScript basics like syntax, data types, operators, and functions. Finally, it introduces object-oriented concepts in JavaScript like prototype-based programming and early vs. late binding.
This was presented at Adobe's 'Ask the AEM Expert' Session. This session covered
Introduction to the core components
How to use and when to use the core components
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes.
- Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements.
- Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes.
- The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.
JavaScript is a scripting language originally designed for web browsers but now used everywhere. It has dynamic typing and supports object-oriented, imperative, and functional programming. JavaScript was created in 1995 and standardized in 1999. It is now the most popular language on GitHub. JavaScript can be used to build interactive web pages, desktop applications, server-side applications, IoT applications, and real-time applications. The core data types in JavaScript are Number, String, Boolean, Object, Function, Array, Date, and Regular Expressions. JavaScript supports features like variables, flow control, error handling, debugging, and JSON for data exchange.
The document discusses various best practices for writing JavaScript code, including placing scripts at the bottom of pages, using meaningful variable and function names, avoiding global variables, and optimizing loops to minimize DOM access. It also covers JavaScript language features like namespaces, data types, and self-executing functions. Finally, it mentions tools for linting, minifying, and bundling code as well as popular integrated development environments for JavaScript development.
ASP.NET MVC is a framework from Microsoft that separates an application's logic, presentation, and data access into three distinct components: models, views, and controllers. This separation of concerns makes the application easier to manage, test, and develop for large teams. ASP.NET MVC uses friendly URLs, does not rely on view state or server-based forms, and supports test-driven development better than traditional ASP.NET Web Forms applications.
This document provides an overview of Angular's template-driven and model-driven forms. It describes the key directives, classes, and interfaces used for building forms in Angular. It explains how to add validation, track form state, create custom validators, and tie forms to components and templates. The document also demonstrates how to set up two-way data binding between forms and models using directives like ngModel, ngFormControl, and ngForm.
This document provides an introduction to jQuery, covering its features, comparisons to other frameworks, selectors, and plugins. jQuery is an open-source JavaScript library that simplifies DOM manipulation, event handling, animations, and Ajax interactions. It uses CSS-style selectors to select and manipulate HTML elements. Some key features include DOM element selections, DOM traversal/modification, DOM manipulation based on CSS selectors, events, effects/animations, Ajax, and extensibility through plugins. The document also discusses jQuery versus other frameworks like Dojo and YUI, demonstrates basic selectors and methods, and encourages the use of plugins to add additional functionality.
Building Reusable Custom Elements With AngularIlia Idakiev
What are Web Components and how we use them. What is Angular Elements and how can we package our angular components as custom elements and reuse them everywhere.
Demos: https://github.com/iliaidakiev/slides/
Backbone.js is a lightweight JavaScript framework that provides structure to client-side code through an MVC pattern. It connects a single-page application to a backend via RESTful JSON and allows fetching and saving data without full page refreshes. Backbone provides models to represent data, views to handle the UI, and collections to manage groups of models. Events allow views to update dynamically when models change. It aims to increase code organization and reuse while keeping the framework lightweight.
Web components allow developers to create reusable custom elements with encapsulated styles and markup. They include APIs for custom elements, shadow DOM, and HTML templates. Web components solve challenges like maintaining a consistent and unified UI across frameworks. Common problems are addressed through standards like custom elements, shadow DOM, and templates. Web components are supported across major browsers and offer benefits like portability, isolated styles, and execution speed.
The document discusses Knockout, a JavaScript library for building dynamic user interfaces. It provides an overview of Knockout's core concepts including declarative bindings, dependency tracking, and templates. It also describes common patterns for using Knockout such as MVVM and building views, view models, and models. Key bindings and functionality are defined including observables, computed observables, and observable arrays.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
Knockout.js is a JavaScript library that makes it easier to create dynamic and responsive user interfaces by binding a data model to HTML elements, automatically updating the UI when the data model changes. It provides declarative bindings, dependency tracking, templating, and other features to simplify building dynamic UIs using the MVVM pattern. Knockout.js works with any web framework, has no dependencies, and supports all major browsers.
This document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
Lift provides a concise framework for developing web applications in Scala with features like convention over configuration, clean separation of presentation logic and content, and powerful AJAX and Comet support. It leverages the Scala programming language and has a responsive community. Code is more concise in Lift, increasing developer productivity.
Overview of The Scala Based Lift Web FrameworkIndicThreads
All of us having experience with other web frameworks such as Struts,Tapestry, Rails, etc would ask “Why another framework? Does Lift really solve problems any differently or more effectively than the ones we’ve used before? The Lift Web Framework provides an advanced set of tools for quickly and easily building real-time, multi-users, interactive web applications. Lift has a unique advantage that no other web framework currently shares: the Scala programming language. Scala is a relatively new language developed by Martin Odersky and his group at EPFL Switzerland. Scala is a hybrid Object Oriented and Functional language that runs at native speeds on the JVM and fully interoperates with Java code. Lift is a hybrid web framework built on Scala. Lift derives its features and idioms from the best of existing web frameworks as well as the functional and OO features in Scala. It compiles to Java bytecode and runs on the JVM, which means that we can leverage the vast ecosystem of Java libraries just as we would with any other java web framework. This presentation details the advantages of this Scala based Web framework over all the existing frameworks that we have used uptil now and shows a small sample application built with Lift. We will create a basic application with a model that maps to RDBMS, web pages that correspond to back end logic and bind dynamically created content to elements on the webpage.
This document provides an overview of jQuery, including how to download and include it in HTML, basic syntax, selectors, events, effects, DOM manipulation methods, AJAX functionality, and links for additional resources. It covers the core concepts like $(selector).action(), chaining methods, and using $(document).ready() to ensure the page is loaded before running scripts. Common selectors, events, effects, and traversal/filtering methods are demonstrated.
Will your code blend? : Toronto Code Camp 2010 : Barry GervinBarry Gervin
XAML getting you down? Tired of the repetition of trial by error WPF or Silverlight development? If you’re not using Expression Blend to build your XAML, you’re doing it all wrong. Let’s take a look at the common pitfalls that new Silverlight developers fall into that make their code unblendable, and then leverage the patterns and techniques that allow us to unlock the virtues of Expression Blend. Testability, blendability, inner peace and maintainability are just 1 hour away
This document discusses JavaScript frameworks and web components. It provides examples of code for Dojo, Ember, Angular, React, and jQuery. It also discusses the benefits of web components, including that they are part of the DOM, future-proof, and modular. Web components include custom elements, shadow DOM, templates, and HTML imports. Browser support is improving but not yet universal. Polyfills exist to provide support in older browsers. The web components specification has changed from version 0 to version 1 to support ES6 classes.
The document discusses jQuery, a JavaScript library. It provides information on:
- What jQuery is and its main functionality, including DOM scripting, Ajax, user interface effects, and form validation.
- How to get started with jQuery, including downloading the file, adding it to a page via a script tag, and using common selectors like ID, class, and tag name to select elements.
- Common jQuery methods for manipulating elements, like adding and removing classes, traversing the DOM, making GET/POST requests, and loading content via Ajax.
- Ensuring the document is ready before running jQuery code by using the ready function.
So in summary, the document provides an overview
- Talk from FrontConf Munich 2017
- https://frontconf.com/talks/09-12-2017/reactive-type-safe-webcomponents
Abstract:
You know the drill right? new cool framework/library appears... boom! new Datepicker in that framework follows and soon enough whole UI libraries, again and again....
It's 2017 and it's time to stop this madness once and for all! How you ask?
In this talk we will go through implementation of an app via vanilla web components and explore all the pain points with all these low level primitives that we have natively in the browser.
In the end we will build our custom super tiny reactive type-safe library which will allow us to build web components with a breeze
Write once, use everywhere by using the platform + abstraction for great Developer experience.
This document provides an introduction to HTML enhanced for web apps using AngularJS. It discusses key AngularJS concepts like templates (directives), controllers, dependency injection, services, filters, models, configuration, routing, resources and testing. Directives allow HTML to be extended with new attributes and elements. Controllers contain business logic. Dependency injection provides dependencies to controllers and services. Filters transform displayed data. Models represent application data. Configuration sets up modules. Routing maps URLs to templates. Resources interact with RESTful APIs. Testing ensures code works as expected.
This document discusses using pluggable applications with TurboGears2. It provides an overview of TurboGears2 features like object dispatch, declarative models, and XML template engines. It then demonstrates how to quickly start an application and explore options to add photo galleries, blogs, and wiki pages by plugging in additional applications and customizing templates and models.
Enterprise State Management with NGRX/platformIlia Idakiev
Angular. State Management Problems. Redux. Understanding what is RxJS by comparing it to promises. Creating a simple app using ngrx/store and ngrx/effects. State Management Practices @ hillgrand.com.
This document provides an in-depth overview of Zone.js and how it works. It discusses:
- The event loop and how Zone.js intercepts asynchronous tasks like setTimeout and promises.
- How zones provide execution contexts and how Zone.js uses zones to observe and control code execution.
- How zones can be forked to create child zones and intercepted using hooks to monitor asynchronous tasks.
- How Zone.js monkey patches browser APIs and schedules tasks through the current zone rather than calling APIs directly.
Schedulers are a very powerful way of controlling the execution of the Reactive Extensions for JavaScript streams. In this presentation we examine the different types of schedulers and the different queues in the JavaScript runtime (Tasks and Micro tasks)
Deep dive into where Promises and Observables originate and why the Array.prototype.map function is called map. After understanding what functors and monads are we see the differences between Promises and Observables. Reactive Programming / Functional Programming
Unit Testing RxJS streams using jasmine-marbles. The demo shows how we can create a Web Component that uses NGRX/store + NGRX/effects like workflow and how we test our effect streams
Presentation about my experience in developing deterministic JavaScript Applications. Thoughts on Redux and problems surrounding it. And how finite state machines/statecharts can help us (xstate).
Demos Location:
https://github.com/IliaIdakiev/slides
State management for enterprise angular applicationsIlia Idakiev
This document discusses state management for enterprise Angular applications. It covers different state management approaches like Flux, Redux, and NgRx/Platform. It describes the types of data that need to be managed in applications. It also discusses layering concepts and different patterns for structuring application logic and state, including transaction scripts, domain models, and separating concerns with services. Reactive extensions and RxJS are presented as ways to manage asynchronous and reactive state changes.
Offline progressive web apps with NodeJS and ReactIlia Idakiev
This document provides an overview of progressive web applications (PWAs) and how to build them using service workers, the Cache API, and IndexedDB for offline functionality. It discusses key concepts like the service worker lifecycle, notifications, manifest files, and the Web Push API. The document also explains how to cache assets, handle network requests when offline, and store data locally using IndexedDB.
Testing rx js using marbles within angularIlia Idakiev
This document discusses testing RxJS observables using marble diagrams with Jasmine and Jasmine-Marbles. It introduces cold and hot observables, provides examples of marble diagram syntax for observables, subscriptions, and tests, and demonstrates how to test asynchronous RxJS code synchronously using the TestScheduler.
Predictable reactive state management for enterprise apps using NGRX/platformIlia Idakiev
Predictable reactive state management for enterprise apps using NGRX/platform:
@ngrx/store - RxJS powered state management for Angular applications, inspired by Redux
@ngrx/effects - Side Effect model for @ngrx/store to model event sources as actions.
@ngrx/router-store - Bindings to connect the Angular Router to @ngrx/store
@ngrx/store-devtools - Store instrumentation that enables a powerful time-travelling debugger.
@ngrx/entity - Entity State adapter for managing record collections.
Angular/NX Overview.
Angular Offline Progressive Web Apps With NodeJSIlia Idakiev
Angular Offline Progressive Web Apps With NodeJS
- Service Workers
- Application Manifest
- Cache API
- IndexedDB
- Notification API
- Web Push Protocol
- Real Time Communication
- HTTP/2
Introduction to Offline Progressive Web ApplicationsIlia Idakiev
This document discusses offline progressive web applications (PWAs) and their advantages. It explains how service workers allow PWAs to work reliably offline through features like caching, push notifications, and background syncing. The service worker lifecycle of registration, installation, and activation is also outlined. The document provides details on using the Cache API and intercepting requests to serve cached content when offline. It discusses how application manifests and HTTP/2 improvements can make PWAs feel like native apps and load quickly.
This presentation includes: Reflective injection using TypeScript, Reflect Metadata, Zone.js, Dependecny Injection, Angular, Decorators, Decorator Factories and etc.
Overview of zone.js (Monkey Patching, Forking, Interception). How its used in Angular for triggering Change Detection and a demo in NodeJS for authentication handling.
All my slides and demos can be found here: https://github.com/IliaIdakiev/slides
Predictable reactive state management - ngrxIlia Idakiev
This document provides an overview and introduction to Predictable Reactive State Management using NGRX. It begins with an introduction to the speaker and then outlines the schedule which includes topics like functional programming, RxJS, Angular change detection, Redux, and NGRX. It then discusses how functional programming concepts like pure functions, immutable data, and declarative programming relate to Angular and libraries like RxJS and NGRX. Specific NGRX concepts like actions, reducers, and selectors are introduced. Examples are provided for building an NGRX application with a single reducer handling the state updates. Additional resources are listed at the end.
Best Practices for Effectively Running dbt in Airflow.pdfTatiana Al-Chueyr
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc
Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk.
What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year?
Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year.
This webinar will review:
- Key changes to privacy regulations in 2024
- Key themes in privacy and data governance in 2024
- How to maximize your privacy program in the second half of 2024
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
Mitigating the Impact of State Management in Cloud Stream Processing SystemsScyllaDB
Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states.
In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing.
Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
Blockchain technology is transforming industries and reshaping the way we conduct business, manage data, and secure transactions. Whether you're new to blockchain or looking to deepen your knowledge, our guidebook, "Blockchain for Dummies", is your ultimate resource.
Best Programming Language for Civil EngineersAwais Yaseen
The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era.
Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.
7 Most Powerful Solar Storms in the History of Earth.pdfEnterprise Wired
Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).
Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment.
How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxSynapseIndia
Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation
Details of description part II: Describing images in practice - Tech Forum 2024BookNet Canada
This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator.
Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/
Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.
2. A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
"Developer & Founder of HNS/HG",
"Lecturer in Advanced JS @ Sofia University",
"Contractor / Consultant",
"Public / Private Courses"
],
"involvedIn": [
"Angular Sofia", "SofiaJS", "BeerJS",
]
}
3. WEB COMPONENTS EVERYWHERE
SEPARATION OF CONCERNS (SOC)
▸ Design principle for separating a computer program into distinct sections, such
that each section addresses a separate concern. (Modularity)
4. WEB COMPONENTS EVERYWHERE
S.O.L.I.D PRINCIPLES OF OBJECT-ORIENTED PROGRAMMING
▸ Single Responsibility Principle
▸ Open / Close Principle
▸ Liskov Substitution Principle
▸ Interface Segregation Principle
▸ Dependency Inversion Principle
http://aspiringcraftsman.com/2011/12/08/solid-javascript-single-responsibility-principle/
5. WEB COMPONENTS EVERYWHERE
WEB COMPONENTS
▸ Introduced by Alex Russell (Chrome team @ Google)
at Fronteers Conference 2011
▸ A set of features currently being added by the W3C to
the HTML and DOM specifications that allow the creation of
reusable widgets or components in web documents and web applications.
▸ The intention behind them is to bring component-based software
engineering to the World Wide Web.
6. WEB COMPONENTS EVERYWHERE
WEB COMPONENTS FEATURES:
▸ HTML Templates - an HTML fragment is not rendered, but stored until it is
instantiated via JavaScript.
▸ Shadow DOM - Encapsulated DOM and styling, with composition.
▸ Custom Elements - APIs to define new HTML elements.
▸ HTML Imports - Declarative methods of importing HTML documents into other
documents. (Replaced by ES6 Imports).
9. WEB COMPONENTS EVERYWHERE
(function () {
const template = createTemplate('<div>Hello World<div>');
class Counter extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hg-counter', Counter);
}());
DEFINE CUSTOM ELEMENT Create a new class that extends HTMLElement
counter.js
10. WEB COMPONENTS EVERYWHERE
(function () {
const template = createTemplate('<div>Hello World<div>');
class Counter extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hg-counter', Counter);
}());
DEFINE CUSTOM ELEMENT Register the new custom element.
counter.js
11. WEB COMPONENTS EVERYWHERE
HTML TEMPLATES
▸ The <template> tag holds its content hidden from the client.
▸ Content inside a <template> tag will be parsed but not rendered.
▸ The content can be visible and rendered later by using JavaScript.
12. WEB COMPONENTS EVERYWHERE
WAYS TO CREATE A TEMPLATE
<template id="template">
<h2>Hello World</h2>
</template>
const template =
document.createElement('template');
template.innerHTML =
'<h2>Hello World</h2>';
Using HTML Using JavaScript
13. WEB COMPONENTS EVERYWHERE
CREATE TEMPLATE HELPER FUNCTION
function createTemplate(string) {
const template = document.createElement('template');
template.innerHTML = string;
return template;
}
utils.js
14. WEB COMPONENTS EVERYWHERE
CREATE THE TEMPLATE
(function () {
const template = createTemplate('<div>Hello World<div>');
class Counter extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hg-counter', Counter);
}());
Use the create template helper function.
counter.js
15. WEB COMPONENTS EVERYWHERE
SHADOW DOM
▸ Isolated DOM - The component's DOM is self-contained
(e.g. document.querySelector() won't return nodes in the component's shadow DOM).
▸ Scoped CSS - CSS defined inside shadow DOM is scoped to it. Style rules
don't leak out and page styles don't bleed in.
▸ Composition - done with the <slot> element.
(Slots are placeholders inside your component that users can fill with their own markup).
16. WEB COMPONENTS EVERYWHERE
DEFINE CUSTOM ELEMENT
(function () {
const template = createTemplate('<div>Hello World<div>');
class Counter extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hg-counter', Counter);
}());
counter.js
Utilise the class constructor.
27. WEB COMPONENTS EVERYWHERE
CUSTOM ELEMENTS LIFECYCLE CALLBACKS
▸ connectedCallback - Invoked each time the custom element is appended into a
document-connected element. This will happen each time the node is moved, and
may happen before the element's contents have been fully parsed.
▸ disconnectedCallback - Invoked each time the custom element is disconnected
from the document's DOM.
▸ attributeChangedCallback - Invoked each time one of the custom element's
attributes is added, removed, or changed.
▸ adoptedCallback - Invoked each time the custom element is moved to a new
document.
28. WEB COMPONENTS EVERYWHERE
CUSTOM COMPONENT ATTRIBUTES
index.html
class Counter extends HTMLElement {
static get observedAttributes() {
return ['value'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') {
this.counter = newValue;
}
}
constructor() {
Handle attribute changes
29. WEB COMPONENTS EVERYWHERE
CUSTOM COMPONENT ATTRIBUTES
index.html
class Counter extends HTMLElement {
static get observedAttributes() {
return ['value'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') {
this.counter = newValue;
}
}
constructor() {
Define which attributes should be watched
32. WEB COMPONENTS EVERYWHERE
WEB COMPONENT CSS
▸ :host - selects the shadow host of the shadow DOM
▸ :host() - match only if the selector given as the function's parameter matches
the shadow host.
▸ :host-context() - match only if the selector given as the function's parameter
matches the shadow host's ancestor(s) in the place it sits inside the DOM
hierarchy.
▸ ::slotted() - represents any element that has been placed into a slot inside an
HTML template
37. WEB COMPONENTS EVERYWHERE
BENEFITS OF USING CUSTOM COMPONENTS
▸ Framework agnostic - Written in JavaScript and native to the browser.
▸ Simplifies CSS - Scoped DOM means you can use simple CSS selectors, more
generic id/class names, and not worry about naming conflicts.
• Productivity - Think of apps in chunks of DOM rather than one large (global) page.
▸ Productivity - Think of apps in chunks of DOM rather than one large (global)
page.
39. WEB COMPONENTS EVERYWHERE
COSTS OF USING CUSTOM COMPONENTS
▸ Template Generation - manually construct the DOM for our templates
(No JSX features or Structural Directives)
▸ DOM Updates - manually track and handle changes to our DOM
(No Virtual DOM or Change Detection)
40. WEB COMPONENTS EVERYWHERE
LIT HTML
▸ Library Developed by the Polymer Team @ GOOGLE
▸ Efficient - lit-html is extremely fast. It uses fast platform features like
HTML <template> elements with native cloning.
▸ Expressive - lit-html gives you the full power of JavaScript and functional programming
patterns.
▸ Extensible - Different dialects of templates can be created with additional features for setting
element properties, declarative event handlers and more.
▸ It can be used standalone for simple tasks, or combined with a framework or component model,
like Web Components, for a full-featured UI development platform.
▸ It has an awesome VSC extension for syntax highlighting and formatting.
44. WEB COMPONENTS EVERYWHERE
FRAMEWORKS
▸ StencilJS - a simple library for generating Web Components and
progressive web apps (PWA).
(built by the Ionic Framework team for its next generation of performant mobile and desktop Web
Components)
▸ Polymer - library for creating web components.
(built by Google and used by YouTube, Netflix, Google Earth and others)
▸ SkateJS - library providing functional abstraction over web
components.
▸ Angular Elements
45. WEB COMPONENTS EVERYWHERE
WEB COMPONENTS SERVER SIDE RENDERING
▸ SkateJS SSR - @skatejs/ssr is a web component server-side
rendering and testing library. (uses undom)
▸ Rendertron - Rendertron is a headless Chrome rendering solution
designed to render & serialise web pages on the fly.
▸ Domino - Server-side DOM implementation based on Mozilla's
dom.js
47. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS
▸ A part of Angular Labs set.
▸ Angular elements are Angular components
packaged as Custom Elements.
48. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS
▸ Angular’s createCustomElement() function transforms an Angular component,
together with its dependencies, to a class that is configured to produce a self-
bootstrapping instance of the component.
▸ It transforms the property names to make them compatible with custom
elements.
▸ Component outputs are dispatched as HTML Custom Events, with the name
of the custom event matching the output name.
▸ Then customElements.define() is used to register our custom element.
Transformation
50. WEB COMPONENTS EVERYWHERE
NEW ANGULAR PROJECT
ng new angular-elements // Create new Angular CLI project
cd angular-elements
ng add @angular/elements // Add angular elements package
ng g c counter // Generate a new component
// Navigate to our new project
51. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS The generated component
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.css'],
encapsulation: ViewEncapsulation.Native
})
export class CounterComponent {
@Input() counter = 0;
constructor() { }
inc() { this.counter++; }
dec() { this.counter--; }
}
src/app/counter/counter.component.ts
52. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS Add View Encapsulation via Shadow DOM (Native)
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.css'],
encapsulation: ViewEncapsulation.Native
})
export class CounterComponent {
@Input() counter = 0;
constructor() { }
inc() { this.counter++; }
dec() { this.counter--; }
}
src/app/counter/counter.component.ts
55. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS Present the counter value
<div>{{counter}}</div>
<button (click)="dec()">Dec</button>
<button (click)="inc()">Inc</button>
src/app/counter/counter.component.html
56. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS Create the manipulation buttons and connect the to the handlers
<div>{{counter}}</div>
<button (click)="dec()">Dec</button>
<button (click)="inc()">Inc</button>
src/app/counter/counter.component.html
68. WEB COMPONENTS EVERYWHERE
IVY - THE NEW RENDERING ENGINE FOR ANGULAR
▸ Incremental builds and uses monomorphic data structures internally (Fast)
▸ Tree Shaking (Efficient)
https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md
69. WEB COMPONENTS EVERYWHERE
ANGULAR ELEMENTS Using the Ivy hopefully we will have something like:
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.css'],
customElement: true
})
export class CounterComponent {
@Input() counter = 0;
constructor() { }
inc() { this.counter++; }
dec() { this.counter--; }
}
src/app/counter/counter.component.ts
71. WEB COMPONENTS EVERYWHERE
BENEFITS OF USING ANGULAR ELEMENTS
▸ All components can be reused across JavaScript applications.
▸ Creating Dynamic Components.
▸ Hybrid Rendering - Server Side Rendering with Custom Elements that don’t
wait for the application to bootstrap to start working.
▸ Micro Frontends Architecture - Vertical Application Scaling (Working with
multiple small applications instead of a big monolith.)
https://micro-frontends.org
72. WEB COMPONENTS EVERYWHERE
ADDITIONAL RESOURCES
▸ https://custom-elements-everywhere.com - This project runs a suite of tests
against each framework to identify interoperability issues, and highlight
potential fixes already implemented in other frameworks.