Skip to content

Home

Jump to bottom
Tyll Weiß edited this page Mar 9, 2016 · 25 revisions

Welcome to the PackageFactory.Guevara wiki! This page hosts developer documentation and conventions.

Getting Started

Please follow the instructions in the README for getting started! This documentation is mainly for developers of this package.

Overall folder structure

The JS frontend of this code resides in Resources/Private/JavaScript.

As this package uses a Guest iFrame for rendering the actual website, we have two JS contexts which communicate with each other. The "outer frame" which contains the Neos UI is called host, while the iFrame containing the website is called the guest.

This structure is reflected in the sub-folder/package structure:

  • Host: the main application of Neos.
    • This is the React.JS/Redux application.
  • Guest: the connector running inside the guest frame.
  • API: the draft for the soon to be separated Neos JS API which handles the communication with the server instance.
    • The API is bootstrapped in the root of the Host application, since it relies on the csrfToken of the logged in user.
  • Login: The login screen. Currently not used.
  • Shared: helper functions which are necessary both inside the guest and the host.
    • Should not contain state!
    • We try to get rid of these functions!

TODO: explain how the guest and the host frame communicate.

Our Style of Writing React.js components

We embrace the usage of stateless components as much as possible with the relatively new functional stateless components from React which where introduced in v0.14. In our containers we use the ES2015 class syntax, combined with the react-redux @connect decorator. The combination of both increases the separation of rendering and glue-code for the state.

State and redux

We use redux for managing our state, and as described before ban state from our react components. We also incorporate a bunch of packages like redux-actions for reducing the code you need to write for creating actions, redux-saga for managing complex and asynchronous actions and action groups, so called sagas.

We use plow.js which enforces immutable data and includes a bunch of helper functions for working with nested state structures. This library can optionally return, and we use it pretty much everywhere, curried functions. If you dont know what a curry function is, you should read this nice interactive tutorial on functional programming.

  • especially plow.js
    • currently Immutable.js not included; but important in the longer run.
  • Redux-Saga (how it is used)

Testing

TODO

Redux State Structure

TODO

Functional Programming Basics

TODO

Glossary

  • Node
  • StoredNode
  • StoredNodeType / NodeType
Clone this wiki locally