Frontend Structure

Now let’s work on our presentation. The frontend of a Sift is essentially a realtime web application with the Red Sift infrastructure taking care of synchronizing data from your backend and making the result of your computation immediately available on the frontend.
The platform also provides a security framework that isolates access, so your frontend only has access to the data only your back end has produced.
Issues such as offline or partially connected clients, streaming data updates and security are automatically handled but bear some explanation.

The Sift framework provides a MVC pattern for the frontend. We are going to build a Sift with ES2015 for your code and the Stylus preprocessor for your CSS.
Rollup is used to package up the Sift so that it can be run on our platform. We use this setup to build our Sifts and we provide npm libraries (redsift-bundler, ui-rs-core) for you to use if you wish to adopt our setup. However Red Sift is not opinionated about the framework choices you wish to use for your frontend.

So far we have been successful in processing a set of emails and counting the number of words in the body, however we haven’t done anything useful with it yet. Let’s step through building a frontend for our Sift and presenting our data in the Summary View first. In the last step we exported data out to the ‘count’ bucket. The special thing about exported buckets is that they will be automatically synchronized with the frontend client (and stored using IndexedDB on our Chrome Extension and Web App redsift.cloud). The frontend can then query these exported buckets and display them in a meaningful way.

Here's the general structure of the frontend folder in your Sift

- package.json
- gulpfile.js
- bundle.config.js
- src/
  - scripts
    - controller.js
    - email-client-controller.js
    - view.js
  - styles
    - *.css / *.styl
- public/
  - assets/
  - dist/
  - *.html

A bit more info about each file.

• package.json defines dependencies on the npm modules mentioned above
• bundle.config.js declares the files that will get packaged up by the redsift-bundler
• gulpfile.js defines the gulp tasks that will get executed to complete the bundling stage.

The SDK is configured to always run the ‘default’ gulp task, so all custom gulp tasks should become subtasks of ‘default’.
The src folder contains the source scripts and stylus pre-processor files.
The public folder is the final destination for the Sift frontend files. You can add assets and html files here and they will be accessible relative to the public folder.

📘

Referencing Assets

For instance the file public/assets/blueprint.svg should be referenced as assets/blueprint.svg in your html files

The redsift-bundler uses the public/dist folder to write all it’s destination files. Since the public folder is the only destination folder the Sift recognizes you should ensure that any custom gulp tasks you add will need to use it as their destination folder.