Webpack, TypeScript, and Code splitting #127

olamothe · 2017-04-06T22:21:06Z

Preview :

https://olamothe.github.io/source.coveo.com/

malaporte

That would be "TypeScript, and Code Splitting" if you don't want @amoreauCoveo to rain fire upon you.

francoislg

:gg: :wp: 👍

francoislg · 2017-04-07T11:55:16Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+## Code splitting
+
+I would say there are 3 big performance factor when dealing with a modern web application that does heavy use of JavaScript :


"performance factors"

that makes heavy use
remove space before colon

francoislg · 2017-04-07T12:04:30Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+```typescript
+{
+  'Searchbox' : (element: HTMLElement)=> Searchbox,


missing space :)

francoislg · 2017-04-07T12:04:59Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+Then, on initialization, when we scan the DOM and when we find a `div` that has the class name `CoveoSearchbox`, we call the correct constructor function with the needed parameters.
+
+```typescript
+function createComponent(element: HTMLElement, id : string) {


id: string

francoislg · 2017-04-07T12:06:03Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+To achieve that, we created a `Lazy` file for each component.
+
+Once again, if we use `Searchbox` as an example :


Space + colon

francoislg · 2017-04-07T12:06:17Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+As an example, let's take the `Searchbox` component.
+
+First, we have the code itself for the `Searchbox` class (in TypeScript) :


No space before colon in English

francoislg · 2017-04-07T12:06:23Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+What happens when we call `Initialization.registerComponent(Searchbox)` is that, in an internal data structure, we simply associate the `Searchbox.ID` to it's constructor.
+
+So we get something like this  :


No space before colon in English

francoislg · 2017-04-07T12:06:37Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+What we ended up designing is, instead of associating the ID with a constructor, we want to have an ID associated with a function that returns a `Promise` of a component.
+
+Something like this : 


Again space + colon

francoislg · 2017-04-07T12:11:11Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+The `Searchbox.js` file will contain all the code needed for the `Searchbox` component to function properly, while the `CoveoJsSearch.js` file will only contain the needed code to download the `Searchbox` component.
+
+Now, when we scan the DOM and find a `div` that match `Searchbox`, we need to do something like this :


Space + colon

find a div that matches

amoreauCoveo

Nice blogpost and great feature to have!

amoreauCoveo · 2017-04-07T19:04:53Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+---
+layout: post
+
+title: "A story of TypeScript, webpack, and code splitting"


What a wonderful sight to see this Oxford comma :)

amoreauCoveo · 2017-04-07T19:05:37Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+In my last blog post, I talked about how we use [webpack](https://webpack.js.org) at Coveo, to improve our development process. 
+
+One of the most powerful feature offered by is [code splitting](https://webpack.js.org/guides/code-splitting/).


most powerful features offered by it is

amoreauCoveo · 2017-04-07T19:06:21Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+## Code splitting
+
+I would say there are 3 big performance factor when dealing with a modern web application that does heavy use of JavaScript :


that makes heavy use
remove space before colon

amoreauCoveo · 2017-04-07T19:07:07Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+I would say there are 3 big performance factor when dealing with a modern web application that does heavy use of JavaScript :
+
+- Initial load time before the end user is able to interact with your application.     


Have * instead of - for a real bullet list
The initial load time . . .

amoreauCoveo · 2017-04-07T19:09:54Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+- The rendering speed, and how much client side logic your code has to execute.
+- How fast the backend can process the various requests you are hammering it with.
+
+Code splitting is used to improve the first of those 3 points. The basic logic is relatively simple : minimize the amount of code needed for your application to "start", and progressively load more JavaScript as the user needs access to more feature while they are using your application.


Remove space before colon

amoreauCoveo · 2017-04-07T19:12:26Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+So, for example, we offer a `Searchbox` component, a `Pager` component, a `ResultList` component, etc. We also offer some more "exotic" components, which are useful in their own rights, but either complex (so they need a lot of code to function), or used in some very particular deployments. A good example is the `Facet` component, which offers advanced filtering capabilities, but requires a good amount of client side code to function.
+
+Since we do not know ahead of time which combination of component will be used in a page (as every implementation is different), we ship a single JavaScript file, containing the code for every components.


for every component (no s)
either that or "for all components"

amoreauCoveo · 2017-04-07T19:13:34Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+```
+
+What happens when we call `Initialization.registerComponent(Searchbox)` is that, in an internal data structure, we simply associate the `Searchbox.ID` to it's constructor.


to its (no apostrophe)

amoreauCoveo · 2017-04-07T19:15:07Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+The `Searchbox.js` file will contain all the code needed for the `Searchbox` component to function properly, while the `CoveoJsSearch.js` file will only contain the needed code to download the `Searchbox` component.
+
+Now, when we scan the DOM and find a `div` that match `Searchbox`, we need to do something like this :


find a div that matches

amoreauCoveo · 2017-04-07T19:15:33Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+}
+```
+
+Only when we call the `getLazyComponent` function does it downloads the associated component JavaScript file. A component is also only downloaded once. This means that even if the search page has 10 `Searchbox`, we will still only download it a single time.


does it download (no s)

amoreauCoveo · 2017-04-07T19:17:25Z

_posts/2017-04-06-a-story-of-typescript-webpack-and-code-splitting.md

+
+## Conclusion
+
+The page load time will now linearly increase with the page complexity, where simple search pages that uses the most simple components will be faster that very complex one. The performance gain is also much more substantial if the user has a slow internet connection, or a less powerful device to parse the JavaScript code (a mobile device, for example).


faster than very complex ones.

Update date.

olamothe added 4 commits April 6, 2017 17:46

Begin new post

a668970

Some rewording + webpack examples

2546284

rewording

eca90f4

Better conclusion + improve code example

1042773

malaporte approved these changes Apr 7, 2017

View reviewed changes

olamothe changed the title ~~Webpack, TypeScript, Code splitting~~ Webpack, TypeScript, and Code splitting Apr 7, 2017

francoislg approved these changes Apr 7, 2017

View reviewed changes

pastjean approved these changes Apr 7, 2017

View reviewed changes

amoreauCoveo requested changes Apr 7, 2017

View reviewed changes

Grammar fixes with review.

345a88f

Update date.

olamothe merged commit d08f65e into coveo:gh-pages Apr 7, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack, TypeScript, and Code splitting #127

Webpack, TypeScript, and Code splitting #127

olamothe commented Apr 6, 2017

malaporte left a comment

francoislg left a comment

francoislg Apr 7, 2017

amoreauCoveo Apr 7, 2017

francoislg Apr 7, 2017

francoislg Apr 7, 2017

francoislg Apr 7, 2017

francoislg Apr 7, 2017

francoislg Apr 7, 2017

francoislg Apr 7, 2017

francoislg Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo left a comment

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017

amoreauCoveo Apr 7, 2017


		## Code splitting

		I would say there are 3 big performance factor when dealing with a modern web application that does heavy use of JavaScript :


		To achieve that, we created a `Lazy` file for each component.

		Once again, if we use `Searchbox` as an example :


		As an example, let's take the `Searchbox` component.

		First, we have the code itself for the `Searchbox` class (in TypeScript) :


		What happens when we call `Initialization.registerComponent(Searchbox)` is that, in an internal data structure, we simply associate the `Searchbox.ID` to it's constructor.

		So we get something like this :


		What we ended up designing is, instead of associating the ID with a constructor, we want to have an ID associated with a function that returns a `Promise` of a component.

		Something like this :


		The `Searchbox.js` file will contain all the code needed for the `Searchbox` component to function properly, while the `CoveoJsSearch.js` file will only contain the needed code to download the `Searchbox` component.

		Now, when we scan the DOM and find a `div` that match `Searchbox`, we need to do something like this :


		In my last blog post, I talked about how we use [webpack](https://webpack.js.org) at Coveo, to improve our development process.

		One of the most powerful feature offered by is [code splitting](https://webpack.js.org/guides/code-splitting/).


		I would say there are 3 big performance factor when dealing with a modern web application that does heavy use of JavaScript :

		- Initial load time before the end user is able to interact with your application.


		So, for example, we offer a `Searchbox` component, a `Pager` component, a `ResultList` component, etc. We also offer some more "exotic" components, which are useful in their own rights, but either complex (so they need a lot of code to function), or used in some very particular deployments. A good example is the `Facet` component, which offers advanced filtering capabilities, but requires a good amount of client side code to function.

		Since we do not know ahead of time which combination of component will be used in a page (as every implementation is different), we ship a single JavaScript file, containing the code for every components.


		## Conclusion

		The page load time will now linearly increase with the page complexity, where simple search pages that uses the most simple components will be faster that very complex one. The performance gain is also much more substantial if the user has a slow internet connection, or a less powerful device to parse the JavaScript code (a mobile device, for example).

Webpack, TypeScript, and Code splitting #127

Webpack, TypeScript, and Code splitting #127

Conversation

olamothe commented Apr 6, 2017

malaporte left a comment

Choose a reason for hiding this comment

francoislg left a 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

Choose a reason for hiding this comment

amoreauCoveo left a 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

Choose a reason for hiding this comment