genesiscommunitysuccess · wjhendry · May 24, 2024 · May 23, 2024 · May 24, 2024
@@ -24,9 +24,7 @@ This day covers:
 
 ## Reviewing basic concepts
 
-As introduced in the Developer Training, Genesis provides a modern future-proofed web stack on top of [Microsoft FAST](https://www.fast.design/), which is a lightweight abstraction that enables you to easily build performant, memory-efficient, standards-compliant Web Components. You can find more about Microsoft FAST and fast-foundation at its main [documentation website](https://www.fast.design/docs/introduction/), which includes an [API reference](https://www.fast.design/docs/api/fast-foundation/).
-
-Genesis also offers a highly configurable design system called Genesis Foundation UI. It is made up of a set of Web Components and accompanying design tokens. This enables you to control visual design in myriad ways using the tokens, CSS, element templates and shadow DOM options.
+Genesis offers a highly configurable design system called Genesis Foundation UI. This is made up of a set of Web Components and accompanying design tokens, which enable you to control visual design in myriad ways using the tokens, CSS, element templates and shadow DOM options.
 
 This picture gives an overview of how it all ties together:
 
@@ -36,70 +34,6 @@ This picture gives an overview of how it all ties together:
 Feel free to revisit the UI chapter of the [Developer Training](../../../getting-started/developer-training/training-content-day2/) before we get into other aspects of the underlying technology used by Genesis in the next sections.
 :::
 
-## Why Web Components?
-
-Remember that Web Components are custom html elements that completely encapsulate their logic to create self-contained reusable components. These components do not clash or interfere with the rest of application. Genesis offers a comprehensive set of Web Components, from simple components like a Button and Text Field, to more complex ones like Micro Front-end apps.
-
-### Performance
-
-Web Components have proven to be consistently faster than many popular JavaScript frameworks when it comes to both
-startup time and paint performance. They also use less memory and often result in significantly smaller bundle sizes
-when compared to their JavaScript counterparts. Standard benchmarks show our component implementation outperforming
-React, Angular 12, Vue 3.2 as well as many others.
-
-### Interoperability
-
-Every Web Component inherits from HTMLElement. So, Web Components seamlessly interoperate with any library or framework
-designed to work with DOM. This includes modern frameworks like React, Angular, Vue, etc. but also libraries like jQuery
-and others. Adopting Web Components enables use of a consistent component library across a diverse set of applications.
-So, teams can standardise on the components and design system without having to force a specific architecture or
-framework on the application developer.
-
-### Incremental adoption
-
-You do not have to re-write an existing app or site to take advantage of Web Components. Since Web Components just
-extend the palette of available HTML elements, you can choose to simply start leveraging whatever custom elements you
-want within your existing app the same way as you use built-in elements.
-
-### Future-proof
-
-Web Components are _literally_, the standard component model of the web, written into the HTML specification. The base
-features have shipped in every modern browser and many new features are planned for the DOM and CSS standards. Some of
-these new HTML capabilities will only be available to Web Components, so continuing down the path of non-standard
-component models will prevent you from taking advantage of platform improvements. Aligning yourself with Web Components
-and other standards will enable you to get the greatest benefit from the evolving web platform.
-
-### Extensible ecosystems and plugin models
-
-By choosing Web Components, you enable your customers to choose their preferred application framework or library, rather
-than forcing them to use any particular JavaScript framework. Building your ecosystem or plugin model around one
-framework often means the exclusion of an entire set of customers who build on another.
-
-### You no longer need JavaScript framework experts
-
-Most of the popular JavaScript frameworks require strong JavaScript skills and knowledge and often at least an
-intermediate proficiency for use. Web Components can be used without any knowledge of JavaScript whatsoever. Building
-around Web Components opens up opportunities for a broader range of customers with more diverse backgrounds.
-
-### Who is using Web Components?
-
-Across the industry we see a pretty big adoption since January 2020. This includes not only heavy investment from
-**Microsoft**, but also from **Google**, **Adobe**, **Salesforce**, **SAP**, **MIT**, **SpaceX**, and many more.
-Curious who else is using Web Components? Check out the ever-growing [list of companies](https://arewebcomponentsathingyet.com/).
-
-### And why Microsoft FAST?
-
-Genesis basic Web Components, such as Button and Text Fields, were not created from scratch. They extend Microsoft FAST components for a number of reasons:
-
-- FAST is a collection of technologies built on Web Components and modern Web Standards.
-- Proven at scale in production. FAST powers Edge, Bing, Maps, Ads, News and other web products at Microsoft. As such, it will power all their next gen web components and design-system technologies.
-- Provides a comprehensive and growing component set out of the box, built directly on the W3C Web Component standards with accessibility built in.
-- Extensible and highly efficient base element to build Genesis domain specific components.
-- Uses [Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/) to efficiently re-use CSS across components.
-- Advanced design-system architecture to support custom theming between clients and applications.
-- Offers a DI system, a Router and other opt-in utilities.
-- Highly active and responsive community.
-
 ## A deeper dive into the alpha web application structure
 
 The alpha application, the one we developed during the Developer training, had a basic UI with a simple page a few components. Open the project on your favourite IDE and you should see an initial project structure like this:

@@ -119,8 +119,6 @@ export const YourTemplate = html<YourTemplate>`
 ```
 Note that inside the repeat directive, the context is `myMultipleCustomColumnConfigArray` instead of `YourTemplate`. This enables you to use `${x => x}` to access the `myMultipleCustomColumnConfigArray` elements.
 
-You can find more information about the `repeat` directive in the [FAST documentation](https://www.fast.design/docs/fast-element/using-directives/#the-repeat-directive).
-
 :::tip A different way to creating multiple columns
 When using `ColDef` objects, it's up to you to decide the approach. You can use the directive **repeat** to create an array of definitions, or you can create each column separately.
 

@@ -90,7 +90,7 @@ export class MainApplication extends FASTElement {
 If you haven't used the `inject` annotation in your application yet, you'll need to get it from the `@microsoft/fast-foundation` package.
 :::
 
-3. Set a reference to the `navigation` object on the FAST router when you instantiate it; this enables you to set up navigation functionality from the navigation bar in the [navigation items step](#navigation-items).
+3. Set a reference to the `navigation` object on the Genesis router when you instantiate it; this enables you to set up navigation functionality from the navigation bar in the [navigation items step](#navigation-items).
 ```javascript
 // fast-router will likely have other attributes such as :config too
 const MainTemplate: ViewTemplate<MainApplication> = html`
@@ -147,7 +147,7 @@ html`
 ```
 The `navigation` object referenced via the `parent` object is why the `navigation` object is added as an attribute to the `fast-router` in the [setup step](#header-set-up). From it, the `navigateTo` method can be called, which allows the user to navigate around the finished application from the navigation buttons.
 
-Moving on from this basic example, a dynamic set of routes can be configured, using the `repeat` directive from FAST.
+Moving on from this basic example, a dynamic set of routes can be configured, using the `repeat` directive.
 
 1. Add the routes configuration into an array in the router configuration class.
 

@@ -1,6 +1,6 @@
----
-format: md
----
+---
+format: md
+---
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 [Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [navigateTo](./foundation-header.navigation.navigateto.md)
@@ -27,5 +27,5 @@ void
 
 ## Remarks
 
-Requires setup of the Router and usage of the FAST Router
+Requires setup of the Router and usage of the Genesis Router
 
@@ -343,9 +343,6 @@ To enable you to add multiple items from the same `registration`, the layout sys
 This is the case both when items are added with `.addItem()`, and when they are added using the declarative API. Under the hood, this uses the Node [cloneNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) api.
 There are certain limitations to this function, especially when using custom elements with the shadow DOM. [See troubleshooting example](#binding-events-inline-in-the-declarative-api).
 
-:::tip
-As a general rule, if you need to have elements with FAST bindings inside the layout, wrap them in custom elements.
-:::
 
 If you are writing your own custom element that needs to work inside the layout, follow these steps.
 
@@ -517,7 +514,7 @@ Component 1 has a **Close** button. Component 1 takes up 25% of the initial widt
 
 ### `repeat` directive
 
-You can use [FAST template directives](https://www.fast.design/docs/fast-element/using-directives) such as `repeat`
+You can use template directives such as `repeat`:
 
 ```javascript
 interface Position {
@@ -661,9 +658,9 @@ Say you want the user to be able to choose between three different types of item
 ```typescript
 // Can either create an element and initialise it completely using JavaScript
 const profileManagement = document.createElement('profile-management');
-// Or could grab a reference to one you create via FAST markup
+// Or could grab a reference to one you create via markup
 const pieChart = document.getElementById('pie-chart');
-// In idiomatic FAST we can have a reference using `ref` directive
+// We can have a reference using `ref` directive
 // const colChart = this.columnChart;
 ```
 
@@ -1051,7 +1048,7 @@ But as the user clicks the toggle button, the `Index Chart` will not be taken aw
 Instead, it will be added as a duplicate every time the observable is set true. Additionally, the contents
 of the panel will be wiped as duplicates are added.
 
-To work around this, you would use FAST directives inside custom web components inside the layout.
+To work around this, you would use directives inside custom web components inside the layout.
 
 ### Binding events inline in the declarative API
 The following example is invalid:
@@ -1068,7 +1065,7 @@ Because of a limitation in the [cloneNode() API](https://developer.mozilla.org/e
 This process is part of the process of adding an item to the layout, using both the declarative HTML and JavaScript APIs. So while you will see
 a checkbox on the screen as part of the layout, the event listener will *not* fire when you `change` the checkbox. This applies to all items and events.
 
-The idiomatic FAST way of implementing this event binding is to create a custom element and attach the event internally.
+The idiomatic way of implementing this event binding is to create a custom element and attach the event internally.
 
 ```typescript
 // template

@@ -11,11 +11,7 @@ tags:
     - ui
 ---
 
-To give your front end a wide range of visual possibilities, the Genesis low-code platform provides a wide range of [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). These are built on top of [Microsoft FAST](https://www.fast.design/docs/introduction/). 
-
-This eliminates a number of problems, such as deciding between Angular, React & Vue, dealing with version clashes & upgrades, or needing to onboard web-framework specialists.
-
-You can use these Web Components to create clear and usable interfaces quickly.
+To give your front end a wide range of visual possibilities, the Genesis low-code platform provides a wide range of Genesis web components. You can use these to create clear and usable interfaces quickly.
 
 | Name                                                                                         | Category      | Description                                                                                                                                                 |
 |----------------------------------------------------------------------------------------------|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------|

@@ -360,7 +360,7 @@ Genesis supports a wide range of third-party integrations. Some of these are lis
 ### Data model configuration
 
 - built for the financial markets
-- based on Web Components (Microsoft FAST) for performance and accessibility
+- based on Genesis web components for performance and accessibility
 - composed into micro front-ends
 
 Web Components allow us to provide reusable building blocks and app functionality that works seamlessly with today’s popular web frameworks - and any that might become popular in the future.

@@ -24,9 +24,7 @@ This day covers:
 
 ## Reviewing basic concepts
 
-As introduced in the Developer Training, Genesis provides a modern future-proofed web stack on top of [Microsoft FAST](https://www.fast.design/), which is a lightweight abstraction that enables you to easily build performant, memory-efficient, standards-compliant Web Components. You can find more about Microsoft FAST and fast-foundation at its main [documentation website](https://www.fast.design/docs/introduction/), which includes an [API reference](https://www.fast.design/docs/api/fast-foundation/).
-
-Genesis also offers a highly configurable design system called Genesis Foundation UI. It is made up of a set of Web Components and accompanying design tokens. This enables you to control visual design in myriad ways using the tokens, CSS, element templates and shadow DOM options.
+The Genesis platform provides a highly configurable design system called Genesis Foundation UI. This is made up of a set of web components and accompanying design tokens. They enable you to control visual design in myriad ways using the tokens, CSS, element templates and shadow DOM options.
 
 This picture gives an overview of how it all ties together:
 
@@ -36,70 +34,6 @@ This picture gives an overview of how it all ties together:
 Feel free to revisit the UI chapter of the [Developer Training](../../../getting-started/developer-training/training-content-day2/) before we get into other aspects of the underlying technology used by Genesis in the next sections.
 :::
 
-## Why Web Components?
-
-Remember that Web Components are custom html elements that completely encapsulate their logic to create self-contained reusable components. These components do not clash or interfere with the rest of application. Genesis offers a comprehensive set of Web Components, from simple components like a Button and Text Field, to more complex ones like Micro Front-end apps.
-
-### Performance
-
-Web Components have proven to be consistently faster than many popular JavaScript frameworks when it comes to both
-startup time and paint performance. They also use less memory and often result in significantly smaller bundle sizes
-when compared to their JavaScript counterparts. Standard benchmarks show our component implementation outperforming
-React, Angular 12, Vue 3.2 as well as many others.
-
-### Interoperability
-
-Every Web Component inherits from HTMLElement. So, Web Components seamlessly interoperate with any library or framework
-designed to work with DOM. This includes modern frameworks like React, Angular, Vue, etc. but also libraries like jQuery
-and others. Adopting Web Components enables use of a consistent component library across a diverse set of applications.
-So, teams can standardise on the components and design system without having to force a specific architecture or
-framework on the application developer.
-
-### Incremental adoption
-
-You do not have to re-write an existing app or site to take advantage of Web Components. Since Web Components just
-extend the palette of available HTML elements, you can choose to simply start leveraging whatever custom elements you
-want within your existing app the same way as you use built-in elements.
-
-### Future-proof
-
-Web Components are _literally_, the standard component model of the web, written into the HTML specification. The base
-features have shipped in every modern browser and many new features are planned for the DOM and CSS standards. Some of
-these new HTML capabilities will only be available to Web Components, so continuing down the path of non-standard
-component models will prevent you from taking advantage of platform improvements. Aligning yourself with Web Components
-and other standards will enable you to get the greatest benefit from the evolving web platform.
-
-### Extensible ecosystems and plugin models
-
-By choosing Web Components, you enable your customers to choose their preferred application framework or library, rather
-than forcing them to use any particular JavaScript framework. Building your ecosystem or plugin model around one
-framework often means the exclusion of an entire set of customers who build on another.
-
-### You no longer need JavaScript framework experts
-
-Most of the popular JavaScript frameworks require strong JavaScript skills and knowledge and often at least an
-intermediate proficiency for use. Web Components can be used without any knowledge of JavaScript whatsoever. Building
-around Web Components opens up opportunities for a broader range of customers with more diverse backgrounds.
-
-### Who is using Web Components?
-
-Across the industry we see a pretty big adoption since January 2020. This includes not only heavy investment from
-**Microsoft**, but also from **Google**, **Adobe**, **Salesforce**, **SAP**, **MIT**, **SpaceX**, and many more.
-Curious who else is using Web Components? Check out the ever-growing [list of companies](https://arewebcomponentsathingyet.com/).
-
-### And why Microsoft FAST?
-
-Genesis basic Web Components, such as Button and Text Fields, were not created from scratch. They extend Microsoft FAST components for a number of reasons:
-
-- FAST is a collection of technologies built on Web Components and modern Web Standards.
-- Proven at scale in production. FAST powers Edge, Bing, Maps, Ads, News and other web products at Microsoft. As such, it will power all their next gen web components and design-system technologies.
-- Provides a comprehensive and growing component set out of the box, built directly on the W3C Web Component standards with accessibility built in.
-- Extensible and highly efficient base element to build Genesis domain specific components.
-- Uses [Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/) to efficiently re-use CSS across components.
-- Advanced design-system architecture to support custom theming between clients and applications.
-- Offers a DI system, a Router and other opt-in utilities.
-- Highly active and responsive community.
-
 ## A deeper dive into the alpha web application structure
 
 The alpha application, the one we developed during the Developer training, had a basic UI with a simple page a few components. Open the project on your favourite IDE and you should see an initial project structure like this: