Code Monkey home page Code Monkey logo

reflex-todo's Introduction

reflex-todo Build Status Heroku

This codebase aims to be an example for a full stack websocket-driven reflex project of sufficient complexity. By sufficient, I mean that this should provide a better idea of how to start building a real-world application, of greater complexity than, say, a "Hello World" demonstration.

First, read the reflex project document (it's not long). A great starting point after reading that document would be ElvishJerricco's reflex-project-skeleton, which is what this codebase started from.

todo

  1. Add iOS app
  2. Add bin/ scripts for android, ios, backend, etc.
  3. Perhaps capture slides of some backend / common code
  4. Show new frontend app code
  5. Try adding a new feature, such as editing text
  6. Add active user count
  7. Add note about Requester typeclass and a GADT api (or just figure it out)

things of interest

  1. Development scripts in bin, for those of us less familiar with nix.
  2. Complete configuration of Android and iOS apps, and scripts for deploying them.
  3. Slides from presenting this application (coming soon).

building

To build the project to its various compilation targets, see bin/build --help. For example,

# build frontend web app
./bin/build frontend
ls dist-frontend/index.html

# build android app
./bin/build android
ls dist-android/android-app.apk

# build ios ad-hoc app
# TODO this will have more arguments
./bin/build --ad-hoc ios
ls dist-ios/ios-app.ipa

# deploy ios app to connected device
./bin/build ios

hacking

To develop on top of this project, or a fork off it:

# get those sweet ghcid shells, for whichever parts of the codebase you are working on
./bin/ghcid frontend
./bin/ghcid backend
./bin/ghcid test

# start up the backend
./bin/ghci backend # main
# start up a warp frontend
./bin/ghci frontend # warp

# code & reload ghci modules as necessary

scaling

Some things will obviously change when trying to build an app that really scales. I remembered reading about acid-state in the 24 Days of Hackage article so I chose to try that out here, and it fits the bill very well for this todo list. However, most people will probably reach for a more familiar database such as postgres. If postgres were being used here, there wouldn't be too much of a code change, but one thing would be cleaned up: broadcasting.

At work, we have an architecture using reflex, websockets, and postgres, and we leverage postgres NOTIFY/LISTEN so that whenever updates are made to the database we can parse the notification and propagate the new state directly to all the frontend clients. This way, each websocket connection doesn't need to worry about communicating with all the other connections, but we still maintain a very high level of interactivity.

Sources

  1. reflex-platform
  2. reflex-project-skeleton
  3. Playing with WebSockets in Haskell and Elm
  4. 24 Days of Hackage: acid-state
  5. shell-helpers

reflex-todo's People

Contributors

elvishjerricco avatar samtay avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.