Coming from Webapps 1
WebApps 2 introduces a few changes. If you have worked with WebApps 1 there are a few differences you should know about.
Loop protection
Sitevision will transform bundled apps to protect against infinite loops. The protection process takes place when a bundled app is deployed as opposed to runtime in WebApps 1. This may take a couple of seconds depending on the size of the bundled app. Sitevision will not render a bundled app before the protection process is complete. Hence, it is not recommended to force-deploy a bundled app in a production environment.
Structure and importing
Structure of WebApps 1 and 2 are very similar but WebApps 2 is less rigid. If you needed to create utilities for separating your code it had to be done in the module folder. Similarly your components had to be located under Components.
Imports are no longerdone by the require function. Instead, use the import statement and let webpack bundle your app.
import banana from '../fruits/Banana';
import chocolate from '../candy/Chocolate';
import router from '@sitevision/api/common/router';
import portletContextUtil from '@sitevision/api/server/PortletContextUtil';Inaccessible requireables
Given the architecture of a bundled app, some app-requireables are inaccessible during render due to no longer being needed or no longer supported:
- require('Component')
- require('ListComponent')
- require('/template/*')
- require('/module/*')
- require('underscore')
New properties in manifest.json
The app's manifest.json now accepts two new properties:
- requiredLibs. Specify which libraries Sitevision should provide for an app (React is currently the only library supported). When using Create Sitevision App, React will not be included in the client bundle, instead Sitevision's provided React will be used to avoid multiple instances of React on a single page.
- bundled. Boolean to tell Sitevision whether this is a bundled app or not.
agnosticRender
The response object (res) has been updated with a new method to render bundled apps: agnosticRender. The method takes server rendered html and initial data that may be used to hydrate the app on the client. The initial data will be received in main.js