The future of templating and frameworks

May 2, 20180 likes274 views

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.

the future of templating and
frameworks…
Filip Bech-Larsen
@IMPACTdigitaldk

Whats next in templating
Filip Bech-Larsen
@IMPACTdigitaldk

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

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 to create 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 clever (Polymer) - scales with complexity (no of changes)
• Be brutal (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

Thank you!
This was “Whats next in templating”
I’m @ﬁlipbech
@IMPACTdigitaldk
Follow for slides

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.

What's the "right" PHP Framework?Barry Jones

FuelPHPNitin Reddy Katkam

FuelPHP presentation - PeoplePerHour workshopFotis Alexandrou

FuelPHP - a PHP HMVC Framework by silicongulf.comChristopher Cubos

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.

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

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.

Day 8 - jRubyBarry Jones

jRuby fixes some issues with the Ruby programming language like memory leaks and lack of kernel level threading by running Ruby code on the Java Virtual Machine which has features like a sophisticated garbage collector, just-in-time compilation for improved performance, and native threading; benchmarks show jRuby provides much higher concurrency and better performance than Ruby for background processing and web applications; deploying a Ruby application using jRuby and a Java application server like Torquebox allows it to take advantage of the reliability, scalability and deployment features of the Java platform.

Proxying DBI with DBD::Gofer and App::Staticperlnohuhu

This document summarizes using DBD::Gofer and App::Staticperl to connect to remote Informix databases behind firewalls. DBD::Gofer acts as a stateless DBI proxy, allowing connections via SSH. App::Staticperl builds a standalone Perl executable containing all necessary modules, avoiding configuration changes. The document outlines the process of building App::Staticperl, installing necessary modules like DBI and DBD::Informix, customizing for the Informix environment, and creating a static Perl executable that can connect to remote Informix databases behind firewalls in a minimal and maintainable way.

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.

Why I Love TorqueBox (And Why You Will Too)benbrowning

TorqueBox is an application server for Ruby on Rails and Rack-based applications that provides features like background processing, messaging, scheduling, and caching on top of JBoss Application Server. It allows developers to build and deploy Ruby applications that take advantage of Java EE services without having to write any Java code. TorqueBox uses Ruby gems and a YAML configuration file to provide an easy development experience while integrating with the robust Java platform. The open source project is supported by a team at Red Hat.

Functional Programming in PHPAurimas Niekis

Lock-free algorithms for Kotlin CoroutinesRoman Elizarov

Repeating History...On Purpose...with ElixirBarry Jones

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

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.

Scala vs rubyKamil Lelonek

- Ruby and Scala both provide object oriented and functional programming capabilities but Scala aims to have better performance than Ruby while providing less ceremony than Java. - Both languages have vibrant communities and encourage testing, but Scala emphasizes letting the compiler do more work and provides concurrency features while Ruby emphasizes flexibility, elegance and fun. - Common tasks like routing, templates, unit tests and specs are similar between Rails and Play frameworks for Ruby and Scala respectively, though Ruby uses more optional conventions while Scala requires more strict conventions.

CrystalKamil Lelonek

Crystal is a programming language that aims to provide Ruby-like syntax with C-like performance. It compiles to efficient native code without needing to specify variable or argument types. Crystal installation is simple on Linux, macOS, and Windows. Programs can be run, built, and compiled directly from the command line. While still in pre-alpha, the language is designed and its compiler written in Crystal. Porting Ruby code to Crystal is easy with few needed modifications. Current limitations include a lack of incremental compilation and difficulty implementing a REPL due to Crystal not being dynamically typed.

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.

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.

Peeling back the Lambda layersPatrick McCaffrey

This document discusses using Lambda layers to share reusable code across Lambda functions. It describes a case study of migrating a PDF generation service from EC2 to Lambda, which required non-standard dependencies like external binaries and system fonts. The implementation involved wrapping an Express app as a Lambda function, testing it locally by mimicking the Lambda runtime in Docker, and deploying with additional bundles. Lambda layers were then used to separate these dependencies and reduce bundle sizes, though it added complexity to local testing. In conclusion, layers provide benefits of code sharing and separation of concerns at the cost of some increased local testing overhead.

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.

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.

Talk about javaDavis Chen

This document outlines a talk about Java given by Davis Chen. The agenda includes discussing why not Java, Lombok, Spring Data JPA, Spring Boot, and conclusions. Lombok is introduced as a way to eliminate boilerplate code like getters and setters. Spring Data JPA allows defining data access in a generic way through interfaces and consistent naming conventions. Spring Boot aims to create standalone applications quickly without XML configuration and includes embedded web servers. The talk concludes that Java remains a good choice for platforms and backends in most cases.

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.

Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen

More Related Content

What's hot (20)

Merged Automation Talk - Pete Carapetyan - Feb 2016 petecarapetyan

Kotlin REST & GraphQL APISean O'Brien

Why Kotlin?Yongqiang Li

Day 8 - jRubyBarry Jones

Proxying DBI with DBD::Gofer and App::Staticperlnohuhu

Craft Beer & ClojureMetosin Oy

Why I Love TorqueBox (And Why You Will Too)benbrowning

Functional Programming in PHPAurimas Niekis

Lock-free algorithms for Kotlin CoroutinesRoman Elizarov

Repeating History...On Purpose...with ElixirBarry Jones

MWLUG - Universal JavaPhilippe Riand

Mixing Plone and Django for explosive resultsSimone Deponti

Scala vs rubyKamil Lelonek

CrystalKamil Lelonek

Stockholm JAM September 2018Andrey Devyatkin

Front-end tower of BabylonDenis Radin

Peeling back the Lambda layersPatrick McCaffrey

Ruby an overall approachFelipe Schmitt

Introduction to Ruby on RailsAmit Patel

Talk about javaDavis Chen

Merged Automation Talk - Pete Carapetyan - Feb 2016 petecarapetyan

Kotlin REST & GraphQL APISean O'Brien

Why Kotlin?Yongqiang Li

Day 8 - jRubyBarry Jones

Proxying DBI with DBD::Gofer and App::Staticperlnohuhu

Craft Beer & ClojureMetosin Oy

Why I Love TorqueBox (And Why You Will Too)benbrowning

Functional Programming in PHPAurimas Niekis

Lock-free algorithms for Kotlin CoroutinesRoman Elizarov

Repeating History...On Purpose...with ElixirBarry Jones

MWLUG - Universal JavaPhilippe Riand

Mixing Plone and Django for explosive resultsSimone Deponti

Scala vs rubyKamil Lelonek

CrystalKamil Lelonek

Stockholm JAM September 2018Andrey Devyatkin

Front-end tower of BabylonDenis Radin

Peeling back the Lambda layersPatrick McCaffrey

Ruby an overall approachFelipe Schmitt

Introduction to Ruby on RailsAmit Patel

Talk about javaDavis Chen

Similar to The future of templating and frameworks (20)

Building a dynamic SPA website with AngularFilip Bruun Bech-Larsen

Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen

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.

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.

Angular ❤️CMSFilip Bruun Bech-Larsen

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.

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

Lightning web components - Introduction, component Lifecycle, Events, decorat...Nidhi Sharma

Lightning Web Components are custom HTML elements built using HTML and JavaScript. This document discusses the fundamentals of Lightning Web Components including their structure, templating, lifecycle hooks, communication between components, and provides a recipe for building a basic to-do list app as an example. The recipe demonstrates creating the necessary SFDX project and components, defining the component templates and logic, and adding the main application component to display the to-do form.

Stackato v3Jonas Brømsø

Stackato v5Jonas Brømsø

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.

They why behind php frameworksKirk Madera

Building an MLOps Stack for Companies at Reasonable ScaleMerelda

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.

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.

Using Apache Camel as AKKAJohan Edstrom

The document discusses using Apache Camel and Apache Karaf to build distributed, asynchronous systems in a similar way to AKKA. It provides examples of building a dynamic routing system using Camel routing and JMS, as well as a modular ETL system for processing CSV files using a configurable, hot-deployable mutation framework. The examples demonstrate how to achieve scalability, modularity, and asynchronous behavior without deep knowledge of the underlying technologies through an event-driven architecture based on messaging.

Stackato v6Jonas Brømsø

Stackato is a PaaS cloud platform from ActiveState that allows developers to easily deploy applications to the cloud. It supports multiple languages including Perl, Ruby, and JavaScript. The presentation demonstrated deploying simple Perl apps to Stackato using the Mojolicious framework. Key benefits of Stackato include minimal differences between development and production environments, one-click deployments, and allowing developers to manage infrastructure. ActiveState is very open and provides documentation, examples, and a community forum to support Stackato users.

An Introduction to MicroservicesAd van der Veer

Another day, another buzzword in the world of software development! ‘Microservices’ is a new approach to structuring server-side software. But is it really new? In this talk I’ll walk you through the birth and ‘raison d’etre’ of microservices and tell about pro’s and con’s of the approach. Having laid the foundation, we will take a look at best-practices and patterns for building micro service architectures and combine this with a tour of current technologies and development tools. Finally, I will take a quick look at the future and discuss some of the remaining challenges. All parts of the presentation will be accompanied by structural examples based on a real ecommerse system.

TypeScript and Angular2 (Love at first sight)Igor Talevski

Web Development with Delphi and React - ITDevCon 2016Marco Breveglieri

This document provides an overview of modern web development with Delphi and React. It discusses how traditional "fat" web applications are no longer preferred and introduces key concepts in modern web development like JavaScript, HTML5 APIs, DOM, jQuery, single page applications, and React. It explains what React is and core React concepts like components, properties, state, virtual DOM, JSX syntax and lifecycle methods. It also discusses how Delphi can be used to build backend APIs that a React front-end can communicate with.

Building a dynamic SPA website with AngularFilip Bruun Bech-Larsen

Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen

Angular ❤️ CMS from #AngularUpFilip Bruun Bech-Larsen

Dynamic content with AngularFilip Bruun Bech-Larsen

Angular ❤️CMSFilip Bruun Bech-Larsen

Killing the Angle Bracketjnewmanux

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

Lightning web components - Introduction, component Lifecycle, Events, decorat...Nidhi Sharma

Stackato v3Jonas Brømsø

Stackato v5Jonas Brømsø

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

They why behind php frameworksKirk Madera

Building an MLOps Stack for Companies at Reasonable ScaleMerelda

O365 Developer Bootcamp NJ 2018 - MaterialThomas Daly

Rails Vs CakePHPGautam Rege

Using Apache Camel as AKKAJohan Edstrom

Stackato v6Jonas Brømsø

An Introduction to MicroservicesAd van der Veer

TypeScript and Angular2 (Love at first sight)Igor Talevski

Web Development with Delphi and React - ITDevCon 2016Marco Breveglieri

More from Filip Bruun Bech-Larsen (18)

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.

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.

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

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

Web development post io2016Filip 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)

Cyber Awareness overview for 2025 month of securityriccardosl1

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

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

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

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

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-und-verwaltung-von-multiuser-umgebungen/ HCL Nomad Web wird als die nächste Generation des HCL Notes-Clients gefeiert und bietet zahlreiche Vorteile, wie die Beseitigung des Bedarfs an Paketierung, Verteilung und Installation. Nomad Web-Client-Updates werden “automatisch” im Hintergrund installiert, was den administrativen Aufwand im Vergleich zu traditionellen HCL Notes-Clients erheblich reduziert. Allerdings stellt die Fehlerbehebung in Nomad Web im Vergleich zum Notes-Client einzigartige Herausforderungen dar. Begleiten Sie Christoph und Marc, während sie demonstrieren, wie der Fehlerbehebungsprozess in HCL Nomad Web vereinfacht werden kann, um eine reibungslose und effiziente Benutzererfahrung zu gewährleisten. In diesem Webinar werden wir effektive Strategien zur Diagnose und Lösung häufiger Probleme in HCL Nomad Web untersuchen, einschließlich - Zugriff auf die Konsole - Auffinden und Interpretieren von Protokolldateien - Zugriff auf den Datenordner im Cache des Browsers (unter Verwendung von OPFS) - Verständnis der Unterschiede zwischen Einzel- und Mehrbenutzerszenarien - Nutzung der Client Clocking-Funktion

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! 🚀

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

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

Build Your Own Copilot & Agents For DevsBrian McKeiver

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

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

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

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

Cyber Awareness overview for 2025 month of securityriccardosl1

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Mobile App Development Company in Saudi ArabiaSteve Jonas

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

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

Build Your Own Copilot & Agents For DevsBrian McKeiver

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

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

The future of templating and frameworks

1. the future of templating and frameworks… Filip Bech-Larsen @IMPACTdigitaldk

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

3. @ﬁlipbech

4. #weAreHiring #Aarhus #Cph

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

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 to create 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 clever (Polymer) - scales with complexity (no of changes) • Be brutal (React) - scales with number of nodes (but very fast because of vdom)

54. Performance • 2 aproaches to rendering/updating • Be clever (Polymer) - scales with complexity (no of changes) • Be brutal (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. closing thoughts…

72. Thank you! This was “Whats next in templating” I’m @ﬁlipbech @IMPACTdigitaldk Follow for slides

The future of templating and frameworks

Recommended

More Related Content

What's hot (20)

Similar to The future of templating and frameworks (20)

More from Filip Bruun Bech-Larsen (18)

Recently uploaded (20)

The future of templating and frameworks