{"id":20252,"date":"2023-03-02T09:00:00","date_gmt":"2023-03-02T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=20252"},"modified":"2024-06-10T16:11:14","modified_gmt":"2024-06-10T14:11:14","slug":"building-spas-with-typescript-and-webcomponents","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/","title":{"rendered":"Frameworkless Approach: Building SPAs with Typescript and WebComponents"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-frameworkless-approach-in-2023\">Frameworkless approach in 2023?<\/h2>\n\n\n\n<p>In the long journey of the Web from the static content navigation system of the origins to the dynamic application platform of today, the web frameworks have played a key role to cover the gaps in the web standards.&nbsp;&nbsp;<\/p>\n\n\n\n<p>As the W3c standards continue to advance, they have incorporated many of the features experimented by browser vendors or by Google, Facebook, and others in their frameworks, <strong>making it increasingly easier to develop an entire application with only standard HTML and EcmaScript 6 features<\/strong>. It is now possible to define reusable components and aggregate them in more complex structures of the application, with full support from all the recent versions of the most relevant browsers.&nbsp;<\/p>\n\n\n\n<p>Finally, the <a href=\"https:\/\/www.codemotion.com\/magazine\/backend\/why-you-should-use-typescript-for-your-next-project\/\" target=\"_blank\" aria-label=\"Typescript  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Typescript <\/a>language, with its powerful code completion, smart refactoring capabilities, and enhanced error checking, makes the code robust and easier to evolve.&nbsp;<\/p>\n\n\n\n<p>Of course, we are not saying that every web dev should now abandon their favorite framework and go \u201cframeworkless\u201d. <strong>The idea of this guide is to present an alternative path and show how today it is possible to develop a fully functional Single Page Application with a different approach<\/strong>. For this purpose, we have teamed up with Wolters Kluwer to show how it is possible to create an application by working with Typescript and WebComponents.<\/p>\n\n\n\n<p>As with almost everything in web development, in the end, it\u2019s a matter of choosing the right tool for the job.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-to-start-with-webcomponents\">How to start with WebComponents<\/h3>\n\n\n\n<p>WebComponents are a set of web platform APIs that allow you to create custom, reusable HTML tags to use in web pages and web apps.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>This is a great way for web professionals to quickly build applications with reusable components and dynamic user experience, with high interoperability and stability over time. Getting started is easy\u2014simply follow the instructions on the<a href=\"https:\/\/www.webcomponents.org\/introduction\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> WebComponents website<\/a>, which includes helpful guides and step-by-step tutorials.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cool-web-component-libraries\">Cool Web Component libraries<\/h3>\n\n\n\n<p>Developing applications from scratch with only web components could require writing a lot of code, especially for the most common use cases. Fortunately, there is an ever-growing list of web component libraries that make it easier to create complex web applications. These are some of the most popular as of today:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Microsoft FAST design library<\/li>\n\n\n\n<li>Polymer Elements<\/li>\n\n\n\n<li>Material Web Components<\/li>\n\n\n\n<li>Stencil<\/li>\n\n\n\n<li>Lit<br><\/li>\n<\/ul>\n\n\n\n<p>These libraries, among others, provide developers with an array of options that allow for a wide range of customization.<strong> They contain a collection of web components like buttons, forms, images, etc., allowing for quick implementation without having to code everything from scratch<\/strong>. These web libraries also provide the opportunity to easily incorporate animations, fonts, and other design elements. This results also in improved overall performance since they come preloaded with cross-platform compatibility capabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-are-spas-becoming-so-popular\">Why are SPAs becoming so popular?<\/h2>\n\n\n\n<p>Before starting, let\u2019s quickly review some of the advantages of web development with Single Page Applications. According to many devs, Single Page Applications (SPAs) are revolutionizing the way we design for the web. They make it easier to build and maintain applications as they contain minimal code and only make one request to a server rather than loading individual new pages from the server each time.&nbsp;<\/p>\n\n\n\n<p>As a result, users experience amazingly quick loading times with SPAs. Additionally, their interactive user experiences <strong>result in better UX for end-users compared to traditional sites<\/strong> or apps. Furthermore, due to their minimal setup and fewer components, cross-platform development is also made easier with Single Page Applications. Summing up:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Less code to maintain<\/li>\n\n\n\n<li>Better performance and loading times<\/li>\n\n\n\n<li>Simplified cross platform development<\/li>\n\n\n\n<li>Better UX<\/li>\n\n\n\n<li>Easier debugging<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"753\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-1024x753.jpg\" alt=\"\" class=\"wp-image-20256\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-1024x753.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-300x221.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172-768x565.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1288800172.jpg 1194w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Single Page Applications offer many benefits, especially in code maintenance and performance.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-get-started\">Get started!<\/h2>\n\n\n\n<p>Now we are ready to take a look at how the Wolters Kluwer team has <strong>created a simple back-office administration tool as a Single Page Application in a \u201cframeworkless\u201d approach<\/strong> by combining Typescript and WebComponents with dynamic ES6 modules. The objective is to follow a real-world environment, even if on a small scale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-choices\">Design choices<\/h3>\n\n\n\n<p>As we\u2019ve seen before, you can use many different approaches to build your application without frameworks, here we\u2019re going to explain some choices made. As client language, Typescript is a good choice for the advantages in terms of robustness and ease of maintainability by a large team. This is why it is used in many large products, including Wolters Kluwer\u2019s ones.<\/p>\n\n\n\n<p>The Microsoft Fast design library was the choice when it comes to getting many common-use components to jumpstart the application development, because of its completeness and simplicity. Moreover, Microsoft has a better track record when it comes to maintaining the backward compatibility of its solutions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-development-setup\">Development setup<\/h3>\n\n\n\n<p>Before starting, make sure you know what you are going to need beforehand in terms of libraries, extensions, languages, etc.&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>npm-install the dependencies you need. For an application like this, a good starting point would be:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.typescriptlang.org\/\" class=\"ek-link\">typescript<\/a> for strong-typed development<\/li>\n\n\n\n<li><a href=\"https:\/\/sass-lang.com\/\">sass<\/a> css extension language<\/li>\n\n\n\n<li><a href=\"https:\/\/www.fast.design\/\">fast<\/a> design library<\/li>\n\n\n\n<li><a href=\"https:\/\/swc.rs\/\">swc<\/a> transpiler<\/li>\n\n\n\n<li>run-parallel (to run parallel watches during the development)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>After this, you will want to configure everything so you can work with watch mode. This allows recompiling whenever a change is made.&nbsp; Here\u2019s how to do it with the different tools chosen above.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To configure the build with watch add the following in the package.json:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-string\">\"scrips\"<\/span>: {\n\n..\n\n<span class=\"hljs-string\">\"style:watch\"<\/span>: <span class=\"hljs-string\">\"sass src:build --watch\"<\/span>,\n\n<span class=\"hljs-string\">\"swc:watch\"<\/span>: <span class=\"hljs-string\">\"npx swc src --out-dir build --watch\"<\/span>,\n\n<span class=\"hljs-string\">\"tsc:typecheck:watch\"<\/span>: <span class=\"hljs-string\">\"(cd src) &amp; tsc -b -w\"<\/span>,\n\n<span class=\"hljs-string\">\"watch:fast\"<\/span>: <span class=\"hljs-string\">\"npm-run-all --parallel style:watch swc:watch\n\ntsc:typecheck:watch\"<\/span>,\n\n..\n\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Development steps<br><\/p>\n\n\n\n<p>Now that we are ready to start, here are the different steps and code snippets that will get your SPA done. There are also some tips and general best practices that are key for working with WebComponents.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a root web component as the app container (e.g. sample-app)<\/li>\n\n\n\n<li>Insert the root web component in the index.html:<br>.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"module\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/build\/components\/sample-app\/sample-app.controller.js\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n..\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">wki-cs-tool<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">wki-cs-tool<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n..<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Add the component \u201cfast-router\u201d (from the MS Fast design library) a history-based navigation and routing solution useful to create multi-page and full application experiences<br><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">window<\/span>.wkiCsToolTemplate = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">wkiCsToolTemplate<\/span>(<span class=\"hljs-params\"><\/span>): <span class=\"hljs-title\">ViewTemplate<\/span>&lt;<span class=\"hljs-title\">WkiCsToolElement<\/span>&gt; <\/span>{\n\n<span class=\"hljs-keyword\">return<\/span> html&lt;WkiCsToolElement&gt;<span class=\"hljs-string\">`\n\n&lt;fast-router :config=<span class=\"hljs-subst\">${x =&gt; x.config}<\/span>&gt;&lt;\/fast-router&gt;\n\n`<\/span>;\n\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Write your page layout as a FASTElementLayout implementation (which is a component of the Fast design library). This is nothing more than a page template where you define the layout of your application. In this app, we\u2019ve simply put a system bar to the left and placeholder space to the right.<br>This layout is always visible, while the screens are loaded in the right portion. Surely, many of the most seasoned devs here have recognized just the basics of a single page application.<\/li>\n\n\n\n<li>Write every screen of your application as a separate web component, associating them to a route path.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-webcomponents-development\">WebComponents development<\/h3>\n\n\n\n<p>Now each screen of the SPA is a separate component, which can of course contain other components defined by the application, or borrowed from the FAST design library or other sources.<\/p>\n\n\n\n<p>A challenge of developing a non-trivial application with a pure \u201cframeworkless\u201d web component approach is to define a set of rules and conventions to avoid getting lost once things get bigger and different people interact with the codebase.<\/p>\n\n\n\n<p>We have chosen a convention for our components to separate view, logic and styles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wk-*.template.ts: contains the view (html or other child webcomponents, with property binding and events defined in a declarative form)<\/li>\n\n\n\n<li>wk-*.controller.ts: contains the component logic, which can receive service components via injection (for operations like reading or saving entities, etc.)<\/li>\n\n\n\n<li>wk-*.style.css: contains the sass definition of the webcomponent styles<\/li>\n<\/ul>\n\n\n\n<p>And that\u2019s it!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion-know-when-to-go-frameworkless\">Conclusion: know when to go \u201cframeworkless\u201d<\/h2>\n\n\n\n<p>Going <strong>frameworkless is a radical approach to build a web application that allows you to depend only on supported and stable standards,<\/strong> thus reducing the effort to follow the quick and sometimes hectic evolution of web frameworks.&nbsp;<\/p>\n\n\n\n<p>By defining conventions, choosing one library instead of another, and building your own layer of shared code, <strong>you\u2019re basically creating your own framework from scratch<\/strong>. But if you are building a product that is big and long-lived, it may be worth the effort.&nbsp;<\/p>\n\n\n\n<p>You don\u2019t need to make such a radical choice, anyway, to learn and use web components. You can also <strong>combine your own components with the features you already know and use from your favorite framework<\/strong>, somehow limiting your dependency on the framework and using standards where they are available.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/careers.wolterskluwer.com\/it-it\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"250\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/BANNER_FOOTER_-FEB23_wolterskluwer-1.png\" alt=\"\" class=\"wp-image-20260\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/BANNER_FOOTER_-FEB23_wolterskluwer-1.png 976w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/BANNER_FOOTER_-FEB23_wolterskluwer-1-300x77.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/BANNER_FOOTER_-FEB23_wolterskluwer-1-768x197.png 768w\" sizes=\"auto, (max-width: 976px) 100vw, 976px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Frameworkless approach in 2023? In the long journey of the Web from the static content navigation system of the origins to the dynamic application platform of today, the web frameworks have played a key role to cover the gaps in the web standards.&nbsp;&nbsp; As the W3c standards continue to advance, they have incorporated many of&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":20254,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":6,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[11359],"collections":[],"class_list":{"0":"post-20252","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-webcomponents","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Frameworkless: Build SPAs with Typescript and WebComponents<\/title>\n<meta name=\"description\" content=\"How to get the most out of Typescript and WebComponents to build Single Page Applications in dynamic ES6 modules.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frameworkless Approach: Building SPAs with Typescript and WebComponents\" \/>\n<meta property=\"og:description\" content=\"How to get the most out of Typescript and WebComponents to build Single Page Applications in dynamic ES6 modules.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-02T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-10T14:11:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\"},\"headline\":\"Frameworkless Approach: Building SPAs with Typescript and WebComponents\",\"datePublished\":\"2023-03-02T08:00:00+00:00\",\"dateModified\":\"2024-06-10T14:11:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/\"},\"wordCount\":1362,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/iStock-1214321254.jpg\",\"keywords\":[\"WebComponents\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/\",\"name\":\"Frameworkless: Build SPAs with Typescript and WebComponents\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/iStock-1214321254.jpg\",\"datePublished\":\"2023-03-02T08:00:00+00:00\",\"dateModified\":\"2024-06-10T14:11:14+00:00\",\"description\":\"How to get the most out of Typescript and WebComponents to build Single Page Applications in dynamic ES6 modules.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/iStock-1214321254.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/iStock-1214321254.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"designer team working together in web industry, responsive web design concept\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/building-spas-with-typescript-and-webcomponents\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Frameworkless Approach: Building SPAs with Typescript and WebComponents\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/CodemotionIT\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/codemotion-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Frameworkless: Build SPAs with Typescript and WebComponents","description":"How to get the most out of Typescript and WebComponents to build Single Page Applications in dynamic ES6 modules.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/","og_locale":"en_US","og_type":"article","og_title":"Frameworkless Approach: Building SPAs with Typescript and WebComponents","og_description":"How to get the most out of Typescript and WebComponents to build Single Page Applications in dynamic ES6 modules.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-03-02T08:00:00+00:00","article_modified_time":"2024-06-10T14:11:14+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"Frameworkless Approach: Building SPAs with Typescript and WebComponents","datePublished":"2023-03-02T08:00:00+00:00","dateModified":"2024-06-10T14:11:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/"},"wordCount":1362,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg","keywords":["WebComponents"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/","name":"Frameworkless: Build SPAs with Typescript and WebComponents","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg","datePublished":"2023-03-02T08:00:00+00:00","dateModified":"2024-06-10T14:11:14+00:00","description":"How to get the most out of Typescript and WebComponents to build Single Page Applications in dynamic ES6 modules.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg","width":1024,"height":1024,"caption":"designer team working together in web industry, responsive web design concept"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/building-spas-with-typescript-and-webcomponents\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Frameworkless Approach: Building SPAs with Typescript and WebComponents"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg",1024,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-300x300.jpg",300,300,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-768x768.jpg",768,768,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-1024x1024.jpg",1024,1024,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg",1024,1024,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg",1024,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254.jpg",100,100,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/02\/iStock-1214321254-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"Frameworkless approach in 2023? In the long journey of the Web from the static content navigation system of the origins to the dynamic application platform of today, the web frameworks have played a key role to cover the gaps in the web standards.&nbsp;&nbsp; As the W3c standards continue to advance, they have incorporated many of&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=20252"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20252\/revisions"}],"predecessor-version":[{"id":28098,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/20252\/revisions\/28098"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/20254"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=20252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=20252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=20252"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=20252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}