Whats next in templating

Mar 22, 20180 likes431 views

Discussing the future of frontend templating, introducing lit-html with lit-html-element and element-router. This talk was given at React Aarhus.

Whats next in templating
Filip Bech-Larsen
@IMPACTdigitaldk

https://developers.google.com/experts/people/ﬁlip-bruun-bech-larsen

https://www.facebook.com/groups/ngAarhus/

templating…
• Building user interface using a declarative format (kinda looks like html)
• Some parts are static - some are dynamic

UI = f(state)
React really taught this to the world…

the job of a templating system
• balance between
• developer experience
• fast boot
• fast update

What does the platform provide?
• template element
• (tagged) template literals

The template element
• holds “inert” DOM
• scripts don’t run
• styles don’t apply
• easily cloned
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Template literals
• instead of quotes uses backticks - `
• can span multiple lines
• can embed expressions
• can be tagged…
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

tagged template literals
• a tag is a function that processes the template literal - both the literal and the
expressive parts. Can return anything

can we use this for creating a cool
templating system?

a solution?
• template in js means tools
• create template to stamp out clone
• identity of staticParts as caching-key
• We know what changed…

lit-html
• A tag-function (called html) that returns templating instructions (called
TemplateResult)
• A render method to produce and maintain dom from TemplateResult
• <2kb gzipped and super fast
https://github.com/Polymer/lit-html

directives
or use await, or simply just setValue(promise)

lit-extended is sugar
• properties instead of attributes by default
• declarative event-listening syntax
• only 540b gzipped extra…

Performance
• 2 aproaches to rendering/updating
• Be smart (Polymer) - scales with complexity (no of changes)
• Be fast (React) - scales with number of nodes (but very fast because of
vdom)

that all good…
how do I make a component?

bring your own component
encapsulation, data-ﬂow, events

WebComponents
• custom-elements
• shadow-DOM
• template-element
• html-imports

Lit-html and webcomponents
• Lit is build to be a great ﬁt with web-components
• make a render-method that returns a TemplateResult
• use property setters to invalidate
• re-render when invalidated
• dispatch native DOM-events

there are helpers already
Like LitElement (lit-html-element on npm)

• superpowers properties
• change => invalidation
• types (for conversion), attributes reﬂection, default value
• computed properties
• batching rendering
• lifecycle hooks
• easy id element-queries
LitElement
https://github.com/kenchris/lit-element

element-router
• native web-component router (no dependencies)
• syntax/api almost like Preact-router
• <1 kb
https://github.com/ﬁlipbech/element-router

This document discusses the future of templating frameworks and introduces lit-html as a new lightweight templating solution. Lit-html uses tagged template literals to parse templates and returns templating instructions to efficiently update the DOM. It works well with web components for building reusable custom elements. LitElement provides a base class to simplify building components with lit-html. Element router provides routing capabilities for web components. Overall, lit-html and related tools provide a performant and flexible approach to templating within the web components standard.

Whats next in templatingFilip Bruun Bech-Larsen

Whats next in clientside templatingFilip Bruun Bech-Larsen

This document discusses recent developments in client-side templating. It begins with a brief overview of templating and how it builds user interfaces using declarative formats. It then discusses how templating aims to balance developer experience, fast boot times and fast updates. The document introduces newer templating solutions like lit-html that use tagged template literals and template elements to efficiently create and update DOM templates. It explains how lit-html renders templates and handles different types of template content. The document also discusses how lit-html can be used with web components and libraries like lit-element to create reusable components. Finally, it presents element-router as a native web component routing solution to integrate with lit-html based applications.

Whats next in clientside templatingFilip Bruun Bech-Larsen

Lit-HTML is a lightweight library for building user interfaces with JavaScript templating. It uses tagged template literals and the template element to create templates that are fast to render and update. Lit-HTML templates can include text, expressions, attributes, properties, event handlers, and directives. When used with the LitElement base class, it provides a simple way to create fast, encapsulated web components with reactive data binding and events.

FuelPHPNitin Reddy Katkam

FuelPHP presentation - PeoplePerHour workshopFotis Alexandrou

FuelPHP - a PHP HMVC Framework by silicongulf.comChristopher Cubos

Fast Web Applications with Go Eylem Ozekin

Metaprogramming GoWeng Wei

Migrate PHP E-Commerce Site to GoWeng Wei

This document summarizes one company's experience migrating their PHP e-commerce site to the Go programming language. It discusses how they initially rewrote their catalog page in AngularJS and Go, but ran into issues with Facebook OpenGraph integration. For their second release, they decided on a hybrid PHP and Go approach, with Go used to power specific backend modules like caching and shopping cart functionality. The author reflects on lessons learned around thoroughly evaluating new technologies before deploying them and making sure any changes have team consensus.

Making CLI app in rubyHuy Do

This document discusses how to build command line interface (CLI) applications in Ruby. It introduces the Thor gem for building CLI apps with single commands and then discusses building interactive shell apps using a read-eval-print loop (REPL) and the GNU Readline library. The document provides examples of CLI apps, why they are useful, and tips for making better CLI apps, and concludes by showcasing a Facebook command line application built with these techniques.

Merged Automation Talk - Pete Carapetyan - Feb 2016 petecarapetyan

This document discusses different types of automation and how they have evolved over time. It identifies seven main types: imperative, declarative, templating, implicit, design, UI, and frameworks. The document then provides examples to illustrate how certain automation types have replaced others as technologies advanced. It highlights projects like Polymer, PolyRest, Spring Boot, Spring Data, and Docker that represent shifts toward more implicit and design-based approaches over declarative configurations and templating. The document concludes with references to view the code, slides, and demo for the PolyRest project discussed.

RubyConf Taiwan 2016 - Large scale Rails applicationsFlorian Dutey

This document discusses strategies for scaling large Rails applications. It advocates separating applications into thin controllers, fat models, and following principles like single responsibility and stateless objects. The document also recommends separating applications into layers like services, forms, policies, queries, adapters, and models. Services describe processes, forms convert inputs, policies describe permissions, queries access data, adapters translate between languages, and models manage data. It argues this architecture makes applications more flexible, testable, and debuggable while allowing for easier migration between providers.

MWLUG - Universal JavaPhilippe Riand

Universal Java allows developers to write code once and run it anywhere, including on servers, desktops, mobiles, and IoT devices. Java code is portable because it compiles to bytecode that runs on the Java Virtual Machine (JVM), which exists for most platforms. Some key aspects that enable portability include: 1. Separating platform-independent business logic from platform-specific UI code 2. Using common language features and libraries for cross-platform code 3. Transpiling Java to other languages like JavaScript for web apps 4. Ahead-of-time compilation to native code for better performance on devices The document discusses strategies for writing portable Java code and provides examples using shared business

Kotlin REST & GraphQL APISean O'Brien

This document provides an overview of Kotlin backend development with a focus on GraphQL and REST APIs. Key points include: - The author has over 10 years of experience with functional reactive full stack development using Kotlin. - GraphQL is introduced as an API format developed by Facebook that is strongly typed, self-documenting, and allows clients to specify the data they need in one request. - Frameworks like Apollo and additional libraries can expand GraphQL's capabilities by adding features like caching, monitoring, and schema stitching. - The author focuses on using Apollo for its support across platforms like Kotlin, JavaScript, iOS, and Android. Reasons for choosing Apollo include its wide backend support

Front-end tower of BabylonDenis Radin

This document discusses issues with the current state of web components and proposes an alternative approach called Reactive Elements that addresses these issues. Reactive Elements allow existing frameworks like React and Angular to be used as web components by registering components from these frameworks to make them available in HTML. This provides reusability, composability, and other benefits while avoiding the need for multiple polyfills and improving browser compatibility and performance over web components.

Why Kotlin?Yongqiang Li

Kotlin is a statically typed programming language that runs on the JVM and is fully interoperable with Java. It aims to combine object-oriented and functional programming in a concise syntax that reduces boilerplate code. Kotlin was developed by JetBrains in 2010 and became an officially supported language for Android development by Google in 2017. It features improvements like type inference, data classes, default function parameters, null safety checks, and higher-order functions that allow developers to write safer, more concise code compared to Java.

RubyConf China 2015 - Rails off assets pipelineFlorian Dutey

Web development post io2016Filip Bruun Bech-Larsen

This talk summarizes trends and new technologies in web development. It discusses how the performance of web apps is catching up to native apps through technologies like service workers, push notifications, and responsive design in progressive web apps. The talk also covers new JavaScript features like classes, arrows functions, and async/await. Popular frameworks and patterns like React, Angular and immutable/observable data are mentioned. Resources for staying up to date on new developments are provided.

Functional Programming in PHPAurimas Niekis

Performance and AbstractionsMetosin Oy

Tommi Reiman discusses optimizing Clojure performance and abstractions. He shares lessons learned from optimizing middleware performance and JSON serialization. Data-driven approaches can enable high performance while maintaining abstraction. Reitit is a new routing library that aims to have the fastest performance through techniques like compiled routing data. Middleware can also benefit from data-driven approaches without runtime penalties. Overall performance should be considered but not obsessively, as many apps do not require extreme optimization.

Introduction to Ruby on RailsAmit Patel

This document provides an introduction to Ruby and Ruby on Rails. It discusses what Ruby is, including that it is a dynamic, object-oriented programming language created in the 1990s. It then discusses what Rails is, which is an open source web application framework built on Ruby that follows the MVC pattern. Finally, it provides recommendations for installing Ruby and Rails and includes exercises for learning Ruby.

Ruby an overall approachFelipe Schmitt

Ruby is a dynamic, open source programming language created in 1993 by Yukihiro Matsumoto. It was influenced by Perl, Smalltalk, Python and Lisp. Ruby supports object-oriented, imperative, and functional programming styles. Everything in Ruby is an object and has flexible typing. Ruby also features open classes and duck typing. It gained popularity with the release of the Ruby on Rails framework in 2004.

Craft Beer & ClojureMetosin Oy

The document summarizes Clojure, a functional programming language that runs on the JVM and JavaScript virtual machines. It notes that Clojure is strongly typed, functional, immutable, and allows macros and runtime polymorphism. It then discusses Clojure adoption in Finland, providing examples of startups and consultancies using it. Finally, it recommends some resources for learning Clojure, including books and online courses.

Mixing Plone and Django for explosive resultsSimone Deponti

This document discusses mixing the Django web framework with the Plone content management system (CMS) to create an e-commerce platform with advanced community features. It explores using the Satchmo e-commerce solution and Pinax community modules with Django, while retaining Plone as the CMS due to its content editing capabilities. The document outlines the integration challenges and solutions tried, such as common theming with Diazo, avoiding data duplication, and ensuring users are managed consistently across both systems. It advocates for a single buildout, with different configurations for development and deployment.

PolyglotRory Preddy

Rory Preddy gave a presentation on polyglot programming. He defined a polyglot programmer as someone who uses multiple programming languages in a single application. He discussed polyglot paradigm programming, which combines multiple programming paradigms like object-oriented, functional, and logic paradigms. He also discussed polyglot systems, which use different languages for different parts of a multi-tiered project based on which language is best suited. He provided examples of domain-specific languages, dynamic languages, and stable core languages used in polyglot systems. Finally, he discussed benefits and challenges of polyglot programming and how to get started with it.

Stockholm JAM September 2018Andrey Devyatkin

This document summarizes the state of Jenkins pipelines and whether freestyle jobs are still needed. It outlines the evolution of pipeline plugins from early tools like Build Flow and Job DSL to modern declarative pipelines. While pipelines are now widely used and supported, there are still some cases where freestyle jobs may be preferable, such as for simple utility jobs, jobs requiring conditional stages, or jobs needing to restart from a specific point. The document also recommends looking into newer tools like Jenkins X and configuration as code.

Top 10 php frameworks in 2021MaryamAnwar10

Building a dynamic SPA website with AngularFilip Bruun Bech-Larsen

This document discusses building a dynamic single page application (SPA) with Angular. It describes using Angular routing and components to load dynamic content from a CMS. Key points include using a route resolver to get initial data, a generic page component with *ngIf directives to handle different page types, and directives to handle links and repeated content. It also covers topics like animations, ahead-of-time compilation, and universal rendering.

Angular ❤️ CMS from #AngularUpFilip Bruun Bech-Larsen

This document discusses using Angular with a CMS. It describes challenges like bootstrapping components, initial data loading, and dynamic routing. Solutions explored include using route resolves to get data, generic page components with *ngIf directives, custom routing strategies, and the ComponentFactoryResolver for dynamic components. It also covers animating route changes, handling rich text, server-side rendering for SEO, and packaging the solutions as an NPM module.

More Related Content

What's hot (20)

Metaprogramming GoWeng Wei

Migrate PHP E-Commerce Site to GoWeng Wei

Making CLI app in rubyHuy Do

Merged Automation Talk - Pete Carapetyan - Feb 2016 petecarapetyan

RubyConf Taiwan 2016 - Large scale Rails applicationsFlorian Dutey

MWLUG - Universal JavaPhilippe Riand

Kotlin REST & GraphQL APISean O'Brien

Front-end tower of BabylonDenis Radin

Why Kotlin?Yongqiang Li

RubyConf China 2015 - Rails off assets pipelineFlorian Dutey

Web development post io2016Filip Bruun Bech-Larsen

Functional Programming in PHPAurimas Niekis

Performance and AbstractionsMetosin Oy

Introduction to Ruby on RailsAmit Patel

Ruby an overall approachFelipe Schmitt

Craft Beer & ClojureMetosin Oy

Mixing Plone and Django for explosive resultsSimone Deponti

PolyglotRory Preddy

Stockholm JAM September 2018Andrey Devyatkin

Top 10 php frameworks in 2021MaryamAnwar10

Metaprogramming GoWeng Wei

Migrate PHP E-Commerce Site to GoWeng Wei

Making CLI app in rubyHuy Do

Merged Automation Talk - Pete Carapetyan - Feb 2016 petecarapetyan

RubyConf Taiwan 2016 - Large scale Rails applicationsFlorian Dutey

MWLUG - Universal JavaPhilippe Riand

Kotlin REST & GraphQL APISean O'Brien

Front-end tower of BabylonDenis Radin

Why Kotlin?Yongqiang Li

RubyConf China 2015 - Rails off assets pipelineFlorian Dutey

Web development post io2016Filip Bruun Bech-Larsen

Functional Programming in PHPAurimas Niekis

Performance and AbstractionsMetosin Oy

Introduction to Ruby on RailsAmit Patel

Ruby an overall approachFelipe Schmitt

Craft Beer & ClojureMetosin Oy

Mixing Plone and Django for explosive resultsSimone Deponti

PolyglotRory Preddy

Stockholm JAM September 2018Andrey Devyatkin

Top 10 php frameworks in 2021MaryamAnwar10

Similar to Whats next in templating (20)

Building a dynamic SPA website with AngularFilip Bruun Bech-Larsen

Angular ❤️ CMS from #AngularUpFilip Bruun Bech-Larsen

Dynamic content with AngularFilip Bruun Bech-Larsen

This document discusses using Angular for dynamic content in a CMS context. It describes bootstrapping multiple Angular applications on a page and providing initial data to components. It then discusses using a route config generated by a CMS, resolving data for routes, and using generic components with *ngIf. It also covers ComponentFactoryResolver for dynamic components, AOT, server-side rendering with Angular Universal, and maintaining state between server and client.

Code for Startup MVP (Ruby on Rails) Session 1Henry S

Angular ❤️CMSFilip Bruun Bech-Larsen

They why behind php frameworksKirk Madera

Killing the Angle Bracketjnewmanux

Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it. Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS. This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.

Dev Ops for systems of record - Talk at Agile Australia 2015Mirco Hering

Mirco Hering is a DevOps and Agile lead with over 10 years of experience improving IT delivery through automation, methodology, and innovation. The document discusses applying DevOps principles to systems of record like packaged software, non-custom code, and older custom code. It outlines challenges in automating builds, deployments, testing and integrating these systems. It provides examples of automating merges and traceability for a Siebel system to help systems of record adopt DevOps practices and continuous delivery.

Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen

O365 Developer Bootcamp NJ 2018 - MaterialThomas Daly

This document provides information about a Global Office 365 Bootcamp 2018 event being held in Iselin, New Jersey. It introduces the organizers Tom Daly, Paul Galvin, and Adnan Rafique. It then provides an overview of topics that will be covered, including setting up an Office 365 tenant and development environment, an introduction to SharePoint client-side web parts and extensions, building "Hello World" examples, connecting to SharePoint APIs, an introduction to React, and other important React concepts like components, props, state, and lifecycle methods. Links are provided to Microsoft documentation for many of the code examples and tutorials that will be shown.

PostgREST Design Philosophybegriffs

The document discusses a design philosophy for using a relational database schema to automatically generate an HTTP API. It proposes that tables and views can map to routes, WHERE clauses can map to query parameters, primary keys can identify rows, foreign keys can link related data, and LIMIT and OFFSET can map to HTTP range headers. It also suggests SQL operations like update, insert, and upsert can map to HTTP PATCH, POST, and PUT requests. Additional topics covered include using schema versions for API versions, mapping database roles to OAuth, using OPTIONS to provide column constraints, caching headers from statistics, and using EXPLAIN to prevent inefficient queries.

Stackato v5Jonas Brømsø

HTML literals, the JSX of the platformKenneth Rohde Christiansen

- Lit-html is a library that allows HTML templates to be rendered efficiently using JavaScript template literals. It parses template literals and creates a template object with "parts" that can be updated. - Rendering only updates the dynamic parts of the template, avoiding re-rendering the entire template and reducing work. Templates are treated as values that can be manipulated. - Google is working on lit-html to standardize its parsing of templates and "template parts" concept, with the goal of it potentially being adopted directly into the web platform. Lit-html aims to have minimal limitations and a standardized public API for extensions.

Building an MLOps Stack for Companies at Reasonable ScaleMerelda

Learn from my Mistakes - Building Better Solutions in SPFxThomas Daly

This document provides tips for building better solutions with the SharePoint Framework (SPFx) from the experience of the presenter, Thomas Daly. It discusses common problems developers face with SPFx such as bloated bundles, conflicting library versions, and poor architecture. It provides recommendations for optimizing bundles such as externalizing third-party libraries, minimizing mock data, and using the SP-PnP-JS library. The document concludes with miscellaneous tips including using the Office UI Fabric, typing objects in TypeScript, and staying up to date with the SPFx community.

DIWD 2011Zappos Front-End Development

Stackato v3Jonas Brømsø

gRPC, GraphQL, REST - Which API Tech to use - API Conference Berlin oct 20Phil Wilkins

The document discusses different API technologies including gRPC, GraphQL, and REST. It provides overviews of each technology, describing their origins, key concepts, pros, and cons. gRPC was developed by Google and uses protocol buffers for messages and HTTP/2 for transport. GraphQL was created by Facebook and uses a query language for clients to specify the exact data they need. REST is the more established standard based on HTTP and uses URIs for identification of resources.

Cloud Orchestration is BrokenPublic Broadcasting Service

Rails Vs CakePHPGautam Rege

The document compares PHP and Ruby, and the web frameworks CakePHP and Ruby on Rails. It discusses the key features and differences between PHP and Ruby, and demonstrates how a simple blog application can be created from scratch in under a minute using Ruby on Rails with no coding required, compared to the additional coding needed in CakePHP. The document argues that Ruby on Rails is more productive and fully-featured compared to CakePHP.

Building a dynamic SPA website with AngularFilip Bruun Bech-Larsen

Angular ❤️ CMS from #AngularUpFilip Bruun Bech-Larsen

Dynamic content with AngularFilip Bruun Bech-Larsen

Code for Startup MVP (Ruby on Rails) Session 1Henry S

Angular ❤️CMSFilip Bruun Bech-Larsen

They why behind php frameworksKirk Madera

Killing the Angle Bracketjnewmanux

Dev Ops for systems of record - Talk at Agile Australia 2015Mirco Hering

Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen

O365 Developer Bootcamp NJ 2018 - MaterialThomas Daly

PostgREST Design Philosophybegriffs

Stackato v5Jonas Brømsø

HTML literals, the JSX of the platformKenneth Rohde Christiansen

Building an MLOps Stack for Companies at Reasonable ScaleMerelda

Learn from my Mistakes - Building Better Solutions in SPFxThomas Daly

DIWD 2011Zappos Front-End Development

Stackato v3Jonas Brømsø

gRPC, GraphQL, REST - Which API Tech to use - API Conference Berlin oct 20Phil Wilkins

Cloud Orchestration is BrokenPublic Broadcasting Service

Rails Vs CakePHPGautam Rege

More from Filip Bruun Bech-Larsen (18)

Webcomponents from 0-100 - with Google's LitFilip Bruun Bech-Larsen

This document summarizes a presentation on building web components with Lit and LitElement. It introduces web components as a way to extend HTML with custom elements that encapsulate styling and functionality. Lit and LitElement make building web components easy by providing a base class and template literals for rendering. The presentation demonstrates consuming existing web components, defining a custom element class, handling lifecycle events and property changes, and building a sample component with LitElement that uses properties and events. Attendees are invited to try the sample code and web component playground.

Content as a Service with Umbraco HeadlessFilip Bruun Bech-Larsen

Frameworks and webcomponentsFilip Bruun Bech-Larsen

Future of the WebFilip Bruun Bech-Larsen

Diversity at impactFilip Bruun Bech-Larsen

Filip Bech-Larsen, a software development manager at Impact, discusses diversity at the company. Out of 136 total employees, only 34 are women and just 7 out of 25 managers and 4 out of 55 developers are women. Research shows that diverse teams are more productive due to social sensitivity and varied perspectives, not just combined IQ. To improve diversity, Impact aims to inspire, support equal opportunity in recruiting and promotions, and foster inclusion to make all employees feel welcome. Diversity must be an ongoing effort, not just an annual event.

The Future of the webFilip Bruun Bech-Larsen

The document discusses the future of the web, including progressive web apps, service workers, payment requests, credential management, WebComponents, custom properties, CSS Grid, WebAssembly, Web VR, and the Internet of Things. It provides examples of how these technologies can make web apps more reliable, fast, engaging, and able to access hardware while having only one codebase and easy updating.

Frontend development of the (current) futureFilip Bruun Bech-Larsen

Commerce and the browser in 2017Filip Bruun Bech-Larsen

The document discusses commerce and the browser in 2017. It notes that 50% of online commerce revenue comes from mobile devices, totaling $150 billion in mobile commerce revenue alone. While desktop conversions are still almost twice as high as mobile, the potential for mobile commerce is much larger. The document then discusses new browser APIs for payment processing and authentication that could help address issues like small screens and lengthy input processes that hamper mobile commerce. It provides links to demo pages testing out these new APIs to improve the mobile commerce experience and engagement.

Frontend State of the unionFilip Bruun Bech-Larsen

The document discusses the state of front-end web development and progressive web apps. It outlines pros of native apps versus web apps, and how progressive web apps can offer reliable, fast experiences with features like offline support and push notifications through service workers. New web technologies are discussed like payment APIs, credential management, WebComponents, HTTP/2, JavaScript updates, WebVR, WebAssembly and using the web for IoT. Trends in types, code generation, data flow management and fully utilizing the web platform are also mentioned.

AngularJS best practicesFilip Bruun Bech-Larsen

This document discusses best practices for building modern AngularJS 1.x applications, including thinking of the app as a tree of components, keeping business logic and data in services, avoiding $scope and $watch, managing state consistently, using TypeScript for types, considering Observables with RxJS 5, and using the newest AngularJS release in production with optimizations like concatenation, minification, and gzipping. The document encourages treating directives like components, using one-way bindings, avoiding $apply and other AngularJS patterns that negatively impact performance, and cleaning up event listeners and references.

Frontend development of the (current) futureFilip Bruun Bech-Larsen

Observables - the why, what & howFilip Bruun Bech-Larsen

This document provides an overview of observables including why they are useful, what they are, and how to use them. Specifically: - Observables can make code easier to write and read by handling asynchronous events as streams of values. They support functions like map, merge, and concat. - Observables represent push-based collections of multiple values over time, like streams of form submissions or mouse movements. Common uses include reactive UIs and handling asynchronous data. - Key advantages are clean code with fewer exceptions, ability to combine observables, automatic cancellation of subscriptions, and lazy evaluation. - RxJS is a common library for working with observables. Key concepts are operators for transforming streams and sub

Angular2 workshopFilip Bruun Bech-Larsen

Progressive Web Apps og Payment RequestFilip Bruun Bech-Larsen

SpangulumbracoFilip Bruun Bech-Larsen

This document discusses building single page applications (SPAs) with Angular and Umbraco. It explains what SPAs are, why developers build them, and how they are implemented. It also discusses how Umbraco can provide APIs for navigation, content, and settings to integrate with SPAs. The document covers caching, animations, and common issues like initial content indexing and JavaScript dependencies.

Observables in angular2Filip Bruun Bech-Larsen

Observables in Angular2 with RxJS are a way to handle asynchronous data that may have multiple values over time. Observables are like promises but can handle multiple values, are lazy until subscribed to, and allow composition through operators like filter and map. Angular2 uses observables as a building block but developers can also create their own observables to handle asynchronous data streams. The document then provides an example of using observables in code.

Frontender in-2016Filip Bruun Bech-Larsen

This document summarizes a talk given by Filip Bruun Bech-Larsen on front-end trends in 2016. The talk covered topics like web vs native apps, new JavaScript features, frameworks, styling techniques, and other hot front-end technologies. It provided code examples for service workers, caching with sw-toolbox.js, and emerging patterns like immutable data and observables. The talk concluded with resources for staying up to date on the latest front-end developments through newsletters, blogs, conferences, and following experts on Twitter.

[DK] SPA med angularFilip Bruun Bech-Larsen

Webcomponents from 0-100 - with Google's LitFilip Bruun Bech-Larsen

Content as a Service with Umbraco HeadlessFilip Bruun Bech-Larsen

Frameworks and webcomponentsFilip Bruun Bech-Larsen

Future of the WebFilip Bruun Bech-Larsen

Diversity at impactFilip Bruun Bech-Larsen

The Future of the webFilip Bruun Bech-Larsen

Frontend development of the (current) futureFilip Bruun Bech-Larsen

Commerce and the browser in 2017Filip Bruun Bech-Larsen

Frontend State of the unionFilip Bruun Bech-Larsen

AngularJS best practicesFilip Bruun Bech-Larsen

Frontend development of the (current) futureFilip Bruun Bech-Larsen

Observables - the why, what & howFilip Bruun Bech-Larsen

Angular2 workshopFilip Bruun Bech-Larsen

Progressive Web Apps og Payment RequestFilip Bruun Bech-Larsen

SpangulumbracoFilip Bruun Bech-Larsen

Observables in angular2Filip Bruun Bech-Larsen

Frontender in-2016Filip Bruun Bech-Larsen

[DK] SPA med angularFilip Bruun Bech-Larsen

Recently uploaded (20)

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

tecnologias de las primeras civilizaciones.pdffjgm517

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how: • Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules. • Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance. • Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity. • Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications. • Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market. With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications. Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

Build Your Own Copilot & Agents For DevsBrian McKeiver

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Cyber Awareness overview for 2025 month of securityriccardosl1

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

tecnologias de las primeras civilizaciones.pdffjgm517

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

How Can I use the AI Hype in my Business Context?Daniel Lehner

Build Your Own Copilot & Agents For DevsBrian McKeiver

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Cyber Awareness overview for 2025 month of securityriccardosl1

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Whats next in templating

1. Whats next in templating Filip Bech-Larsen @IMPACTdigitaldk

2. @ﬁlipbech

3. #weAreHiring #Aarhus #Cph

5. https://developers.google.com/experts/people/ﬁlip-bruun-bech-larsen

6. https://www.facebook.com/groups/ngAarhus/

7. Whats next in templating Filip Bech-Larsen @IMPACTdigitaldk

8. templating… • Building user interface using a declarative format (kinda looks like html) • Some parts are static - some are dynamic

9. UI = f(state) React really taught this to the world…

10. a trip down memory lane…

18. whats next?

19. lets take a step back…

20. the job of a templating system • balance between • developer experience • fast boot • fast update

21. What does the platform provide? • template element • (tagged) template literals

22. The template element • holds “inert” DOM • scripts don’t run • styles don’t apply • easily cloned https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

24. Template literals • instead of quotes uses backticks - ` • can span multiple lines • can embed expressions • can be tagged… https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

26. tagged template literals • a tag is a function that processes the template literal - both the literal and the expressive parts. Can return anything

28. tagged template literals • a tag is a function that processes the template literal - both the literal and the expressive parts. Can return anything. • the literal parts-array will be the same (===) in consecutive calls

30. can we use this for creating a cool templating system?

31. the job of a templating system • balance between • developer experience • fast boot • fast update

32. a solution? • template in js means tools • create template to stamp out clone • identity of staticParts as caching-key • We know what changed…

33. introducing lit-html

34. lit-html • A tag-function (called html) that returns templating instructions (called TemplateResult) • A render method to produce and maintain dom from TemplateResult • <2kb gzipped and super fast https://github.com/Polymer/lit-html

36. what can lit handle

37. Text content

38. expressions

39. expressions

40. attributes

41. TemplateResult for composition

42. Arrays

43. Arrays for composition

44. DOM nodes

45. Async via promises

46. extending lit-html directives

47. remember this?

48. directives

49. directives or use await, or simply just setValue(promise)

50. lit-extended is sugar • properties instead of attributes by default • declarative event-listening syntax • only 540b gzipped extra…

51. lit-extended

52. so you say its fast?

53. Performance • 2 aproaches to rendering/updating • Be smart (Polymer) - scales with complexity (no of changes) • Be fast (React) - scales with number of nodes (but very fast because of vdom)

54. Performance • 2 aproaches to rendering/updating • Be smart (Polymer) - scales with complexity (no of changes) • Be fast (React) - scales with number of nodes (but very fast because of vdom) • Lit-html tries to sit in the middle (scales with expressions)

55. that all good… how do I make a component?

56. lit only handles templates

57. bring your own component encapsulation, data-ﬂow, events

58. if only the platform had that…

59. Web-Components

60. WebComponents • custom-elements • shadow-DOM • template-element • html-imports

62. Lit-html and webcomponents • Lit is build to be a great ﬁt with web-components • make a render-method that returns a TemplateResult • use property setters to invalidate • re-render when invalidated • dispatch native DOM-events

64. there are helpers already Like LitElement (lit-html-element on npm)

65. • superpowers properties • change => invalidation • types (for conversion), attributes reﬂection, default value • computed properties • batching rendering • lifecycle hooks • easy id element-queries LitElement https://github.com/kenchris/lit-element

67. with decorators…

68. one more thing…

69. element-router • native web-component router (no dependencies) • syntax/api almost like Preact-router • <1 kb https://github.com/ﬁlipbech/element-router

70. templating with lit is pretty sweet

71. thats it… questions?

Whats next in templating

Recommended

More Related Content

What's hot (20)

Similar to Whats next in templating (20)

More from Filip Bruun Bech-Larsen (18)

Recently uploaded (20)

Whats next in templating