Skip to content

Gulpify build pipeline#3145

Merged
balloob merged 6 commits intodevfrom
detect-async
May 2, 2019
Merged

Gulpify build pipeline#3145
balloob merged 6 commits intodevfrom
detect-async

Conversation

@balloob
Copy link
Copy Markdown
Member

@balloob balloob commented May 2, 2019

Backend PR: home-assistant/core#23618

Alright, so I promised myself to no longer refactor the complete build pipeline for the frontend, but it looks like I was wrong 😁 .

Our current build pipeline is build around a few small scripts to generate icons and translations, and the rest is done in Webpack: copying static files, transpilation, bundling, generating service worker, generating HTML entrypoint files.

The Webpack build was executed twice: once for ES5 and once for modern JS. Because the HTML was already diversified, we ended up doing browser sniffing to route browsers to the right version. This did not always work properly, especially with non-mainstream browsers or sometimes just randomly with mainstream browsers.

With this PR, we are going to change this:

  • We now generate single HTML entrypoint files, which will do feature detection and load the right JS.
  • We now use gulp with individual tasks for handling static files and generating HTML.
  • Webpack still does transpilation, bundling, generating service worker. We will probably dumb this down in the future. I hope to be able to create a modern build that is just native async and await
  • The folder structure is now aligned with how we are serving it from the frontend. This helps simplify the code in the backend. This will also open up the option in the future to use webpack dev server, allowing to run your dev frontend against any instance.

The development and build commands remain unchanged: script/develop and script/build_frontend.

Feature detection of async

Initially I wanted to follow Rich Harris' suggestion of defining an async function: https://twitter.com/Rich_Harris/status/1092916976383651842 . However, as per the replies, this would generate an error for older browsers. So instead, I used a version of this approach.

Fixes #3023

@balloob balloob merged commit 6c41c7b into dev May 2, 2019
@delete-merged-branch delete-merged-branch bot deleted the detect-async branch May 2, 2019 18:35
@balloob balloob mentioned this pull request May 2, 2019
@github-actions github-actions bot locked and limited conversation to collaborators Jul 6, 2022
@steverep
Copy link
Copy Markdown
Member

@balloob was there any reason for limiting the service worker to only the latest build (other than legacy browsers not supporting them at the time)?

@balloob
Copy link
Copy Markdown
Member Author

balloob commented May 24, 2023

Exactly that.

@steverep
Copy link
Copy Markdown
Member

Okay. I want to fix an issue with its source map, so I'll enable it for legacy while I'm at it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Javascript Version Not Detected Properly When Playing Video With New Stream Player

3 participants