This directory contains three example applications.
This is the simpler of the two examples, and you should start here. The design is copied pretty much exactly from the flux todo example. It uses the same actions, same views, and produces the same DOM, so the design overview from the flux repository covers this example application as well.
When reading the code for the example application, you should start with
TodoStore.hs. Next, look
TodoViews.hs. Finally, you can look at
To build, run
stack build followed by
make in the top-level directory. The makefile sets up a symbolic
TODO in the browser
A result of the build is in the directory
js-build/install-root/bin/todo.jsexe. There is a file
example/todo/todo-dev.html which loads this
all.js file from this directory, so you
todo-dev.html after building.
But to deploy a react-flux application, you should minimize it since the size
all.js is 1.8 mebibytes. To do so, the
Makefile calls closure to
produce a file
js-build/todo.min.js. Then the
todo.html references this
with gzip is 124 kibibytes.
TODO in node
NodeMain.hs is a separate main module which instead of rendering the TODO example application into the DOM,
it renders it to a string and then displays it. To execute this, run
cd example/todo npm install email@example.com firstname.lastname@example.org node run-in-node.js
The second example application shows building a responsive side menu using PureCSS. A similar technique with slightly different CSS classes can be used to create any of the menu layouts. The code is ogranzied as:
NavStore.hscontains a store which stores the current page being viewed and a boolean if the responsive side menu is open or closed.
Dispatcher.hscontains a function
changePageTowhich allows changing the page. In a larger application,
Dispatcher.hsshould also contain functions to dispatch to the other stores containing the actual page data.
PageViews.hscontains the actual page content. In a real application, each page should probably be split into its own module and be a controller view for the content store.
App.hscontains the layout for the entire application, with the navigation bar and header.
Main.hsrenders the application into the DOM.
It uses the browser history
API which might
not work if you open
index.html directly from the filesystem (depends on
browser settings). Instead, the index.html file can be served and the history
API always works.
cd example/purecss-side-menu ln -s ../../js-build/install-root/bin/purecss-side-menu.jsexe/all.js purecss-side-menu.js python3 -m http.server 8000
Then open your browser to
The third example application shows routing with the web-routes package.