Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create a flow.start() method to start a Flow app from the client-side #6133

Closed
manolo opened this issue Jul 29, 2019 · 0 comments
Closed

Create a flow.start() method to start a Flow app from the client-side #6133

manolo opened this issue Jul 29, 2019 · 0 comments
Assignees
@manolo
Labels
hilla Issues related to Hilla
Milestone
CCDM MVP

Comments

@manolo
Copy link
Member

manolo commented Jul 29, 2019 •
edited

When bootstrapping a Vaadin 15+ app from client-side code, I want a client-side API to start the Flow app in the context of the current page, so that I can create V14-like apps where Flow has full control of the page, but start them from the client-side code.

The snippet below should start a Flow app in the <body> element:

// The @vaadin/flow package is small (few kBs)
import {Flow} from '@vaadin/flow-frontend/Flow';

// This does not load Flow yet, only sets the config
const flow = new Flow({
 // keep Flow imports in a separate bundle and does not load yet (dynamic import)
 imports: () => import('./generated/flow-imports.js')
});

// This loads Flow and its imports, and lets it take over the page
flow.start();

The following does the same but having flow imports in the main bundle:

// The @vaadin/flow package is small (few kBs)
import {Flow} from '@vaadin/flow-frontend/Flow';
// Include flow imports into the main bundle (static import)
import './generated/flow-imports.js';

// This does not load Flow yet, only sets the config
const flow = new Flow();
// This loads Flow and lets it take over the page
flow.start();
  • This is the API to use in the client-side bootstrap code
  • Create a Flow exported class which has a constructor accepting a config object, including the imports property
  • Add a start method that bootstraps Flow in the same way as the regular bootstrap today, i.e. embedding itself inside and listening to router-link clicks and popstate events. Internally uses the new server-side request handler to initialize the session and the UI.
  • Make possible to append flow UI to browser without requiring an exported web component
    • After flow-client configures the bootstrap, we need to attach UI to some slot in the browser.
    • Take as reference webcomponent implementation and its remote call to server.
  • When flow-client is starting it should ask server for creating a session, UI, and get the configuration (uidl, appId, etc).
  • skip from this task: It should configure client side with errors, stats, push and any other thing that happens in current bootstrap
  • It would require changes in server side
  • code should not throw errors when run in strict mode
@vlukashov vlukashov changed the title Flow start method implementation Create a flow.start() method to start a Flow app from the client-side Jul 31, 2019
@vlukashov vlukashov transferred this issue from vaadin/vaadin-connect Jul 31, 2019
@project-bot project-bot bot added this to Inbox - needs triage in OLD Vaadin Flow ongoing work (Vaadin 10+) Jul 31, 2019
@vlukashov vlukashov mentioned this issue Jul 31, 2019
Closed
@manolo manolo mentioned this issue Aug 1, 2019
Merged
@manolo manolo self-assigned this Aug 1, 2019
@project-bot project-bot bot moved this from Inbox - needs triage to In progress in OLD Vaadin Flow ongoing work (Vaadin 10+) Aug 1, 2019
@manolo manolo added the hilla Issues related to Hilla label Aug 1, 2019
@manolo manolo mentioned this issue Aug 7, 2019
Merged
manolo added a commit that referenced this issue Aug 8, 2019
@manolo
CCDM: implement Flow.start() API (#6194)
76a3207 
This fixes #6133 by:

- Adding a `FlowBootstrap.js` to be distributed in the `flow-client.jar`. It is based in `BootstrapHandler.js` but with small modifications to be an ES module.
- Copying the gwt flow-client file as `FlowClient.js` in order to be distributed in the client jar file. It is wrapped in a function so as it can be lazily executed.
- Adding definition files for `FlowBootstrap.js` and `FlowClient.js` files so as they can be used in typescript.
- Implemented the `Flow.start()` method with the following  steps
   -  Sends a XHR request to flow `JavaScriptBoostrapHandler` in order to get create session 
      and get the application configuration
   - Loads `FlowBootstrap.js` chunk and initialize it with the response from the previous step
   - Loads `FlowClient.js` chunk and run it.
- Added tasks to maven and npm to correctly build the Flow client library and test it.
@manolo manolo mentioned this issue Aug 9, 2019
Merged
@vlukashov vlukashov added this to the CCDM MVP milestone Aug 12, 2019
manolo added a commit that referenced this issue Aug 12, 2019
@manolo
CCDM: connect client and server UIs from javascript (#6210)
25e39da 
Fixes  #6133 by:
- It Makes possible to append flow UI to browser without 
   requiring an exported web component.
- After flow-client configures the bootstrap, is it possible to
   attach UI to any slot in the browser.
- This PR does not resolve client side navigation because server
   side is not implemented yet (#6221), instead it attaches a static 
   view to the outlet from server
- Fixes a couple of errors in the generated client javascript when
  importing the file as an ES6 module:
  - There was a JSNI block with non declared variable in a for
     statement
  - There was a weird function where a variable was not declared
     when the method was inlined by gwt compiler
- Adding `eslint` rules to early detect whether the produced
   javascript has declaration errors
@vlukashov vlukashov mentioned this issue Feb 27, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@manolo manolo

Labels
hilla Issues related to Hilla
Projects
None yet
Milestone
CCDM MVP
Development

No branches or pull requests
3 participants
@manolo @vlukashov @upstairlounge