othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(installation): build commands, no more roll-up, webpack and PWAs

Browse Source
This commit is contained in:
dannyrb 2019-09-05 07:11:35 -04:00
parent d1289540bd
commit 080183c712
1 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/latest/essentials/installation.md
View File

@ -5,38 +5,52 @@ processes:
```bash
# Static Asset output: For deploying PWAs
yarn run build:web
yarn run build
# Single `.js` script, for embedding viewer into existing apps
yarn run build:package
```
## create-react-app (PWA)
## Progressive Web Application (PWA)
> [create-react-app](https://github.com/facebook/create-react-app) provides
> pre-configured build process for developing front-end applications with
> [React](https://reactjs.org/).
> [Progressive Web Apps][pwa] are a new breed of web applications that meet the
> [following requirements][pwa-checklist]. Notably, targeting a PWA allows us
> provide a reliable, fast, and engaging experience across different devices and
> network conditions.
The ohif-viewer package can be run as a create-react-app application. This is
useful for development, debugging, or evolving the OHIF Viewer into your own
custom imaging application.
The OHIF Viewer is maintained as a [monorepo][monorepo]. We use WebPack to build
the many small static assets that comprise our application. Also generated is an
`index.html` that will serve as an entry point for loading configuration and the
application, as well as a `service-worker` that can intelligently cache files so
that subsequent requests are from the local file system instead of over the
network.
You can read more about this particular strategy in our
[Build for Production Deployment Guide](./../deployment/recipes/build-for-production.md)
## Rollup (Packaged Script)
## Commonjs Bundle (Packaged Script)
> [Rollup](https://rollupjs.org/guide/en) is a module bundler for JavaScript. It
> uses the new standardized format for code modules included in the ES6 revision
> of JavaScript.
The [@ohif/viewer][viewer-npm] package is built with WebPack to provide a React
component that can be dropped into a larger application. The `OHIFViewer`
component is the entire viewer, configurable via React `props`. This is useful
for including the OHIF Viewer in a larger web application, as the entire
application can be provided via a `<script>` tag with no build process required.
The [ohif-viewer](https://www.npmjs.com/package/ohif-viewer) package can be
built with Rollup to provide a set of React components which can be dropped into
a larger application. Specifically, the ohif-viewer package provides a React
component named `OHIFViewer` which is the entire viewer, configurable via React
`props`. This is useful for including the OHIF Viewer in a larger web
application, as the entire application can be provided via a `<script>` tag with
no build process required.
The bundle is not as performant or as optimized as the PWA build. It includes
fonts, styles, and the core extensions. If you find yourself facing performance
issues, you may wish to tweak what's included in this bundle or switch to the
PWA build.
You can read more about this particular strategy in our
[Embedded Viewer Deployment Guide](./../deployment/recipes/embedded-viewer.md)
<!--
Links
-->
<!-- prettier-ignore-start -->
[pwa]: https://developers.google.com/web/progressive-web-apps/
[pwa-checklist]: https://developers.google.com/web/progressive-web-apps/checklist
[monorepo]: https://github.com/OHIF/Viewers/issues/768
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
<!-- prettier-ignore-end -->