docs: add introduction.md #354

DammneD · 2022-01-21T13:48:36Z

No description provided.

also add assets for it

nightnei · 2022-01-21T15:33:20Z

docs/routing/introduction.md

+
+The following describes how this is handled in the ILC, but first let's clear up the terminology:
+
+ - Hard transitions - Transition in which the application on the page is replaced by another one.


emphasize the fact that one is when routing is handled via ILC, and another is when routing handled inside the fragment

nightnei · 2022-01-24T08:46:51Z

docs/routing/introduction.md

@@ -8,9 +8,9 @@ Since we no longer have one monolithic application that handles all routes, inst

 The following describes how this is handled in the ILC, but first let's clear up the terminology:

- - Hard transitions - Transition in which the application on the page is replaced by another one.
+ - Hard transitions - A transition handled by ILC, with such a transition, the application on the page changes to another one.


"A transition handled by ILC"
"A transition handled by ILC routing"

nightnei · 2022-01-24T08:46:57Z

docs/routing/introduction.md


- - Soft transitions - A transition that only replaces the content within the app, not the app itself.
+ - Soft transitions - A transition that is handled inside the application, with such a transition, only the content inside the application changes, but not the application itself.


To have consistent definitions, instead of "A transition that is handled inside the application" I would use "A transition handled by own routing of some fragment at the page.

And ", but not the application itself" confuses me, so let's remove it.

nightnei · 2022-01-24T09:00:29Z

docs/routing/introduction.md

+
+Now, let's talk a little about the theory, after which we will move on to practical examples:
+
+ In ILC, we can use one HTML template for all of our applications. With this approach, SSR occurs once when the page is first loaded, then all navigation occurs through CSR. So let's look at navigation in more detail:


"we can use one HTML template" - no, we use always one template, and we don't have the capability to change it. Please correct this sentence.

nightnei · 2022-01-24T09:03:30Z

docs/routing/introduction.md

+ For clarity, here is the routing table:
+ ![Routing table](../assets/routes/route.png)
+
+Let's go to the `/people/` route, it will be a `hard transitions` because we render a new application on the `/people/*` route.


in your example it's not a hard transition, it's just SSR. it can confuse people.
you should say something like "for example, we are at /plants page and want to open '/people' page. in this case we have hard transition".
correct and rephrase this sentense.

also add asset

StyleT · 2022-01-24T09:15:00Z

docs/routing/introduction.md

+
+ ![Introdaction demo](../assets/routes/introduction-demo.png)
+
+#


What is this?

Looks like unnecessary markup

StyleT · 2022-01-24T09:26:32Z

docs/routing/introduction.md

+
+The following describes how this is handled in the ILC, but first let's clear up the terminology:
+
+ - Hard transitions - A transition handled by ILC routing, with such a transition, the application on the page changes to another one.


In Manning book "Hard transitions" are the ones that cause full page reload. And I think it's counterintuitive to change the meaning of the statement here. As you still need somehow to call transitions with full page reload.

Also you've missed the whole explanation of the App Shell concept (which is basically what ILC does). As well as at least basic explanation of how ILC actually turns hard transitions into "soft ones" by intercepting one events and re-emitting the others....

Another point: there is a nice visualization of Two-level routing (Figure 7.7) in the book. Would be nice to also have it here with all related theory behind it.

StyleT · 2022-01-25T10:57:45Z

Pls add:

Flat vs 2-tiered routing
Why ILC sticks to 2-tiered routing
Links within applications: Link vs GlobalLink

StyleT · 2022-01-25T10:48:28Z

docs/routing/introduction.md

+
+The following describes how this is handled in the ILC, but first let's dive a little into the general theory of the micro frontend routing and clear up the terminology:
+
+ - Hard navigation describes a page transition where the browser


Suggested change

- Hard navigation describes a page transition where the browser

- **Hard navigation** - describes a page transition where the browser

StyleT · 2022-01-25T10:48:43Z

docs/routing/introduction.md

+ - Hard navigation describes a page transition where the browser
+ loads the complete HTML for the next page from the server.
+
+ - Soft navigation refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this


Suggested change

- Soft navigation refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this

- **Soft navigation** - refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this

StyleT · 2022-01-25T10:49:24Z

docs/routing/introduction.md

+ - Soft navigation refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this
+ scenario the client fetches its data via an API from the server.
+
+ So, we have several approaches to implement navigation, the image below shows two of them:


Suggested change

So, we have several approaches to implement navigation, the image below shows two of them:

Generally, we have several approaches to implement navigation, the image below shows two most popular of them:

StyleT · 2022-01-25T10:50:29Z

docs/routing/introduction.md

+
+ ![Introdaction demo](../assets/routes/introduction-demo.png)
+
+At ILC, we use a third approach called Unified SPA*.


Suggested change

At ILC, we use a third approach called Unified SPA*.

In ILC, we use third approach called **Unified SPA**.

StyleT · 2022-01-25T10:51:09Z

docs/routing/introduction.md

+ ![Introdaction demo](../assets/routes/introduction-demo.png)
+
+At ILC, we use a third approach called Unified SPA*.
+ILC will appear in it as an application shell, it's job is to map URLs to the correct team.


This sentence is meaningless...

StyleT · 2022-01-25T10:53:41Z

docs/routing/introduction.md

+At ILC, we use a third approach called Unified SPA*.
+ILC will appear in it as an application shell, it's job is to map URLs to the correct team.
+
+ * The Unified SPA (Single Page Application) approach introduces a central application container. It handles page transitions between the teams. Here all navigations are soft.


Useless bulletpoint... Why are you making lists which contain 1 item only?

StyleT · 2022-01-25T10:58:20Z

docs/routing/introduction.md

+
+Now more detail about ILC:
+
+ In ILC, we can use one HTML template for all of our applications. With this approach, SSR occurs once when the page is first loaded, then all navigation occurs through CSR. In addition to the fact that all navigation inside the ILC is soft, it also uses "2-tiered routing".


SSR is an optional thing in ILC. Also it has nothing to do with routing

StyleT · 2022-01-25T10:59:12Z

docs/routing/introduction.md

+ In ILC, we can use one HTML template for all of our applications. With this approach, SSR occurs once when the page is first loaded, then all navigation occurs through CSR. In addition to the fact that all navigation inside the ILC is soft, it also uses "2-tiered routing".
+ ILC looks at the first part of the URL to determine which team is responsible (top-level routing). The router of the matched team processes the complete URL to find the correct page inside its single-page application (second-level routing).
+
+ - top-level routing - A transition handled by ILC routing, with such a transition, the application on the page changes to another one.


It's 100% wrong definition

StyleT · 2022-01-26T08:54:55Z

docs/routing/introduction.md

+
+ In ILC, we can use one HTML template for all of our applications. With this approach, initial page loading occurs only once when the page is first time loaded, then all navigation occurs through CSR. In addition to the fact that all navigation inside the ILC is soft, it also uses **2-tiered routing**.
+
+ Unlike the **flat routing** approach, where we would have to specify in the ILC the full route to every page of all our applications, with a **2-tiered routing** approach, we just need to specify in the ILC route to the application. All navigation within the application can be implemented by each developer team using the native tools of their application (like react-router, vue-router etc.).


Unlike the flat routing approach, where we would have to specify in the ILC the full route to every page of all our applications, with a 2-tiered routing approach, we just need to specify in the ILC route to the application.

This statement doesn't make any sense to me....

pls rephrase

bandantonio · 2022-02-03T11:50:06Z

@DammneD Please pay super close attention to formatting - it seems like every single line starts with a space. Remove them completely like you did in the PR #355

bandantonio · 2022-02-03T10:27:50Z

docs/routing/introduction.md

+# Introduction
+
+Most JavaScript frameworks come with a dedicated routing solution
+like `angular/router` or `vue-router`. They make it possible to


Suggested change

like `angular/router` or `vue-router`. They make it possible to

like `angular/router` or `vue-router`. They allow you to

bandantonio · 2022-02-03T10:29:14Z

docs/routing/introduction.md

+navigate through different pages of an application without having to
+do a full page refresh on every link click.


Suggested change

navigate through different pages of an application without having to

do a full page refresh on every link click.

navigate through pages of an application without a full page refresh on every click.

bandantonio · 2022-02-03T10:35:38Z

docs/routing/introduction.md

+like `angular/router` or `vue-router`. They make it possible to
+navigate through different pages of an application without having to
+do a full page refresh on every link click.
+Since we no longer have one monolithic application that handles all routes, instead we have several independent applications, we need to solve an important issue, namely routing.


Who are 'we'?

Is it necessary to talk about monolith at all?

I would just indicate the current state and why the routing issue still exists in the current state

Update:

Problem statement

When you have a monolithic application, it handles all the routes on its own. When there are two or more applications, they also handle all their routes independently. Since, by default, one independent application know nothing about routes and pages of other independent application. This gives you a problem to solve - a routing issue.

bandantonio · 2022-02-03T10:44:33Z

docs/routing/introduction.md

+do a full page refresh on every link click.
+Since we no longer have one monolithic application that handles all routes, instead we have several independent applications, we need to solve an important issue, namely routing.
+
+The following describes how this is handled in the ILC, but first let's dive a little into the general theory of the micro frontend routing and clear up the terminology:


Suggested change

The following describes how this is handled in the ILC, but first let's dive a little into the general theory of the micro frontend routing and clear up the terminology:

Before proceeding with details on how the issue is handled by ILC, get familiar with the basics of routing in the micro-frontends and terminology:

bandantonio · 2022-02-03T10:47:53Z

docs/routing/introduction.md

+ - **Soft navigation** refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this
+ scenario the client fetches its data via an API from the server.


Suggested change

- **Soft navigation** refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this

scenario the client fetches its data via an API from the server.

- **Soft navigation** describes a page transition that is rendered entirely on the client-side, typically by using a client-side router. In this scenario, the client fetches data from the server via API.

bandantonio · 2022-02-03T14:51:09Z

docs/routing/introduction.md

+
+ Within the application, we can use our native tools (for example `<Link>` in `React router`) to navigate between pages within the application, and `global link` - it's just <a>, tags to navigate between applications.
+
+ As mentioned before, transition between applications in ILC occurs thanks to the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicking on them, provided that:


Suggested change

As mentioned before, transition between applications in ILC occurs thanks to the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicking on them, provided that:

In ILC, as mentioned before, the transition between applications occurs via the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicks on them, provided that:

bandantonio · 2022-02-03T14:51:51Z

docs/routing/introduction.md

+ 1. tag contains non-empty `href`.
+ 2. `event.PreventDefault` not equal `false`
+ 3. `target` not equal `_self`
+ 4. This is not a special url (`mailto`, `tel`, etc.)


Suggested change

1. tag contains non-empty `href`.

2. `event.PreventDefault` not equal `false`

3. `target` not equal `_self`

4. This is not a special url (`mailto`, `tel`, etc.)

1. Tag contains a non-empty `href`.

1. `event.PreventDefault` does not equal `false`.

1. `target`does not equal `_self`.

1. This is not a special url (`mailto`, `tel`, etc).

bandantonio · 2022-02-03T14:53:23Z

docs/routing/introduction.md

+ 3. `target` not equal `_self`
+ 4. This is not a special url (`mailto`, `tel`, etc.)
+
+ Otherwise, the ILC does not take any part in processing the click on the link.


Suggested change

Otherwise, the ILC does not take any part in processing the click on the link.

If one of the above points is not met, ILC ignores the processing of the clicks on the link.

bandantonio · 2022-02-03T14:56:07Z

docs/routing/introduction.md

+
+ Otherwise, the ILC does not take any part in processing the click on the link.
+
+Now let's recap:


Suggested change

Now let's recap:

Conclusion

bandantonio · 2022-02-03T14:57:33Z

docs/routing/introduction.md

+ Otherwise, the ILC does not take any part in processing the click on the link.
+
+Now let's recap:
+ ILC acts as an wrapper for other applications, making all our transitions soft. In addition, we use two-level routing, so that each team can configure routing inside their application as they like, in ILC, you only need to specify the path to the application.


Suggested change

ILC acts as an wrapper for other applications, making all our transitions soft. In addition, we use two-level routing, so that each team can configure routing inside their application as they like, in ILC, you only need to specify the path to the application.

ILC acts as a wrapper for other applications making all the transitions soft. Furthermore, it uses two-level routing so that teams can configure routing inside their application as they need to, whereas, in ILC, you only need to specify the path to the application.

bandantonio · 2022-02-04T14:06:20Z

docs/routing/introduction.md

+You can use native tools (for example `<Link>` in `React router`) to navigate between pages within the application, and `global link` - a link (`<a>` tag) to navigate between applications.
+
+In ILC, as mentioned before, the transition between applications occurs via the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicks on them, provided that:
+1. Tag contains a non-empty `href`.


Indent a list with a blank line

bandantonio · 2022-02-04T14:06:36Z

docs/routing/introduction.md

+If one of the above points is not met, ILC ignores the processing of the clicks on the link.
+
+### Conclusion
+ILC acts as a wrapper for other applications making all the transitions soft. Furthermore, it uses two-level routing so that teams can configure routing inside their application as they need to, whereas, in ILC, you only need to specify the path to the application.


Indent a heading with a blank line

bandantonio · 2022-02-04T14:08:24Z

docs/routing/introduction.md

+Most JavaScript frameworks come with a dedicated routing solution like `angular/router` or `vue-router`.
+They allow you to navigate through pages of an application without a full page refresh on every click.
+When you have a monolithic application, it handles all the routes on its own. When there are two or more applications, they also handle all their routes independently. Since, by default, one independent application know nothing about routes and pages of other independent application. This gives you a problem to solve - a routing issue.
+


Suggested change

## Routing basics

bandantonio · 2022-02-04T14:09:00Z

docs/routing/introduction.md

+Most JavaScript frameworks come with a dedicated routing solution like `angular/router` or `vue-router`.
+They allow you to navigate through pages of an application without a full page refresh on every click.


Move this under the introduction

docs: add introduction.md

37e53d4

also add assets for it

DammneD requested review from StyleT, nightnei and bandantonio January 21, 2022 13:48

docs: fix path to asset

2d1b2a9

nightnei reviewed Jan 21, 2022

View reviewed changes

docs: change description

127d14d

nightnei reviewed Jan 24, 2022

View reviewed changes

docs: change some description

7f4562e

nightnei reviewed Jan 24, 2022

View reviewed changes

docs: change some description

bbb009b

also add asset

StyleT suggested changes Jan 24, 2022

View reviewed changes

DammneD added 3 commits January 24, 2022 18:12

docs: global change introduction.md

33ddc9d

docs: add some assets

7271fd1

docs: add recap

9ea44fc

StyleT suggested changes Jan 25, 2022

View reviewed changes

DammneD added 2 commits January 25, 2022 17:39

docs: some description changes

a147916

docs: change description

63bf802

StyleT suggested changes Jan 26, 2022

View reviewed changes

DammneD added 2 commits January 26, 2022 11:41

docs: minor changes

3e7501e

docs: minor changes

0e25598

StyleT approved these changes Jan 26, 2022

View reviewed changes

bandantonio added the documentation Improvements or additions to documentation label Feb 1, 2022

bandantonio requested changes Feb 3, 2022

View reviewed changes

DammneD added 2 commits February 4, 2022 15:03

docs: fix description

d5bb06f

docs: fix description

fc97bde

bandantonio requested changes Feb 4, 2022

View reviewed changes

docs: visual fix

1735b21

bandantonio approved these changes Feb 4, 2022

View reviewed changes

nightnei approved these changes Feb 4, 2022

View reviewed changes

StyleT merged commit f1ec6df into namecheap:master Feb 4, 2022


		The following describes how this is handled in the ILC, but first let's clear up the terminology:

		- Hard transitions - Transition in which the application on the page is replaced by another one.


		- Soft transitions - A transition that only replaces the content within the app, not the app itself.
		- Soft transitions - A transition that is handled inside the application, with such a transition, only the content inside the application changes, but not the application itself.


		Now, let's talk a little about the theory, after which we will move on to practical examples:

		In ILC, we can use one HTML template for all of our applications. With this approach, SSR occurs once when the page is first loaded, then all navigation occurs through CSR. So let's look at navigation in more detail:


		![Introdaction demo](../assets/routes/introduction-demo.png)

		#


		The following describes how this is handled in the ILC, but first let's clear up the terminology:

		- Hard transitions - A transition handled by ILC routing, with such a transition, the application on the page changes to another one.


		The following describes how this is handled in the ILC, but first let's dive a little into the general theory of the micro frontend routing and clear up the terminology:

		- Hard navigation describes a page transition where the browser

	- Hard navigation describes a page transition where the browser
	- Hard navigation - describes a page transition where the browser

	- Soft navigation refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this
	- Soft navigation - refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this

	So, we have several approaches to implement navigation, the image below shows two of them:
	Generally, we have several approaches to implement navigation, the image below shows two most popular of them:


		![Introdaction demo](../assets/routes/introduction-demo.png)

		At ILC, we use a third approach called Unified SPA*.

	At ILC, we use a third approach called Unified SPA*.
	In ILC, we use third approach called Unified SPA.


		Now more detail about ILC:

		In ILC, we can use one HTML template for all of our applications. With this approach, SSR occurs once when the page is first loaded, then all navigation occurs through CSR. In addition to the fact that all navigation inside the ILC is soft, it also uses "2-tiered routing".


		In ILC, we can use one HTML template for all of our applications. With this approach, initial page loading occurs only once when the page is first time loaded, then all navigation occurs through CSR. In addition to the fact that all navigation inside the ILC is soft, it also uses 2-tiered routing.

		Unlike the flat routing approach, where we would have to specify in the ILC the full route to every page of all our applications, with a 2-tiered routing approach, we just need to specify in the ILC route to the application. All navigation within the application can be implemented by each developer team using the native tools of their application (like react-router, vue-router etc.).

	like `angular/router` or `vue-router`. They make it possible to
	like `angular/router` or `vue-router`. They allow you to

		navigate through different pages of an application without having to
		do a full page refresh on every link click.

	navigate through different pages of an application without having to
	do a full page refresh on every link click.
	navigate through pages of an application without a full page refresh on every click.

	The following describes how this is handled in the ILC, but first let's dive a little into the general theory of the micro frontend routing and clear up the terminology:
	Before proceeding with details on how the issue is handled by ILC, get familiar with the basics of routing in the micro-frontends and terminology:

		- Soft navigation refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this
		scenario the client fetches its data via an API from the server.

	- Soft navigation refers to a page transition that’s entirely clientside rendered, typically by using a client-side router. In this
	scenario the client fetches its data via an API from the server.
	- Soft navigation describes a page transition that is rendered entirely on the client-side, typically by using a client-side router. In this scenario, the client fetches data from the server via API.


		Within the application, we can use our native tools (for example `<Link>` in `React router`) to navigate between pages within the application, and `global link` - it's just <a>, tags to navigate between applications.

		As mentioned before, transition between applications in ILC occurs thanks to the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicking on them, provided that:

docs: add introduction.md #354

docs: add introduction.md #354

Conversation

DammneD commented Jan 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

StyleT commented Jan 25, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bandantonio commented Feb 3, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Problem statement

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

	As mentioned before, transition between applications in ILC occurs thanks to the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicking on them, provided that:
	In ILC, as mentioned before, the transition between applications occurs via the `<a>` tags. To do this, ILC keeps track of all `<a>` tags on the page and handles clicks on them, provided that:

	Otherwise, the ILC does not take any part in processing the click on the link.
	If one of the above points is not met, ILC ignores the processing of the clicks on the link.


		Otherwise, the ILC does not take any part in processing the click on the link.

		Now let's recap:

	ILC acts as an wrapper for other applications, making all our transitions soft. In addition, we use two-level routing, so that each team can configure routing inside their application as they like, in ILC, you only need to specify the path to the application.
	ILC acts as a wrapper for other applications making all the transitions soft. Furthermore, it uses two-level routing so that teams can configure routing inside their application as they need to, whereas, in ILC, you only need to specify the path to the application.

		Most JavaScript frameworks come with a dedicated routing solution like `angular/router` or `vue-router`.
		They allow you to navigate through pages of an application without a full page refresh on every click.