Imaginary backend #1

Imaginary backend #2

Demo with imaginary backend #1

Demo with imaginary backend #2

Your assignment is to develop a ClojureScript application for the following scenario:

• A customer designs an online survey on Dashboard.
• The survey has the following four elements:

1. How was your experience with us today? (Presentation style: Inline clickable options) Options:

• Very good
• Good
• Neutral
• Bad
• Very Bad

2. What is the reason for your dissatisfaction? (Presentation style: Dropdown) Options:

• Agent was rude
• Waiting times are long
• No solution for my problem
• Other

3. Please explain the reason for your dissatisfaction (Presentation style: Textarea)
4. A submit button

• The customer sends the link to its various customers who had called the call center today.
• Their customers opens the link sent by the company and is presented with the survey.
• When the customers are presented with the survey, initially only the first question is visible.
• Customers who choose on Very Good, Good, and Neutral options can submit their feedback.
• Customers who choose Bad or Very Bad options are presented with the second question:
• Customers who choose options other than the Other option can submit their feedback.
• Customers who choose the Other option are presented with the 3rd element as a textarea to enter the reasons for their dissatisfaction.
• After entering the reason, customers can submit their feedback.

NOTES

1. We expect this assignment to be built with ClojureScript & Re-frame library. If you are more comfortable with other ClojureScript libraries, you can also use them.
2. You need to interact with an imaginary backend that returns the survey you requested. You will use this imaginary backend also for submitting the feedback.
3. You are free to use existing ClojureScript data structures or roll out your own.
4. Automated testing of this application is essential to the task.
5. Your assignment deadline is 26.10.2020.
6. Bonus: A pretty good look and feel.
7. Bonus: Packaging and deployment of this application is a good addition.

• Architecture: Single Page Application (SPA)
• Languages
  • Front end (re-frame): ClojureScript (CLJS)
• Dependencies
  • UI framework: re-frame (docs, FAQs) -> Reagent -> React
• Build tools
  • Project task & dependency management: Leiningen
  • CLJS compilation, REPL, & hot reload: shadow-cljs
• Development tools
  • Debugging: CLJS DevTools

• /: project config files
• dev/: source files compiled only with the dev profile
  • cljs/user.cljs: symbols for use during development in the ClojureScript REPL
• resources/public/: SPA root directory; dev / prod profile depends on the most recent build
  • index.html: SPA home page
    • Dynamic SPA content rendered in the following div:

      <div id="app"></div>

    • Customizable; add headers, footers, links to other scripts and styles, etc.
  • Generated directories and files
    • Created on build with either the dev or prod profile
    • Deleted on lein clean (run by all lein aliases before building)
    • js/compiled/: compiled CLJS (shadow-cljs)
      • Not tracked in source control; see .gitignore
• src/cljs/survey/: SPA source files (ClojureScript, re-frame)
  • core.cljs: contains the SPA entry point, init

Use your preferred editor or IDE that supports Clojure/ClojureScript development. See Clojure tools for some popular options.

1. Install JDK 8 or later (Java Development Kit)
2. Install Leiningen (Clojure/ClojureScript project task & dependency management)
3. Install Node.js (JavaScript runtime environment) which should include NPM or if your Node.js installation does not include NPM also install it.
4. Clone this repo and open a terminal in the survey project root directory
5. (Optional) Download project dependencies:

   lein deps

Browser caching should be disabled when developer tools are open to prevent interference with shadow-cljs hot reloading.

Custom formatters must be enabled in the browser before CLJS DevTools can display ClojureScript data in the console in a more readable way.

1. Open DevTools (Linux/Windows: F12 or Ctrl-Shift-I; macOS: ⌘-Option-I)
2. Open DevTools Settings (Linux/Windows: ? or F1; macOS: ? or Fn+F1)
3. Select Preferences in the navigation menu on the left, if it is not already selected
4. Under the Network heading, enable the Disable cache (while DevTools is open) option
5. Under the Console heading, enable the Enable custom formatters option

1. Open Developer Tools (Linux/Windows: F12 or Ctrl-Shift-I; macOS: ⌘-Option-I)
2. Open Developer Tools Settings (Linux/macOS/Windows: F1)
3. Under the Advanced settings heading, enable the Disable HTTP Cache (when toolbox is open) option

Unfortunately, Firefox does not yet support custom formatters in their devtools. For updates, follow the enhancement request in their bug tracker: 1262914 - Add support for Custom Formatters in devtools.

Start a temporary local web server, build the app with the dev profile, and serve the app, browser test runner and karma test runner with hot reload:

lein watch

Please be patient; it may take over 20 seconds to see any output, and over 40 seconds to complete.

When [:app] Build completed appears in the output, browse to http://localhost:8280/.

shadow-cljs will automatically push ClojureScript code changes to your browser on save. To prevent a few common issues, see Hot Reload in ClojureScript: Things to avoid.

Opening the app in your browser starts a ClojureScript browser REPL, to which you may now connect.

See Shadow CLJS User's Guide: Editor Integration. Note that lein watch runs shadow-cljs watch for you, and that this project's running build ids is app, browser-test, karma-test, or the keywords :app, :browser-test, :karma-test in a Clojure context.

Alternatively, search the web for info on connecting to a shadow-cljs ClojureScript browser REPL from your editor and configuration.

For example, in Vim / Neovim with fireplace.vim

1. Open a .cljs file in the project to activate fireplace.vim
2. In normal mode, execute the Piggieback command with this project's running build id, :app:

   :Piggieback :app

1. Connect to the shadow-cljs nREPL:

   lein repl :connect localhost:8777

   The REPL prompt, shadow.user=>, indicates that is a Clojure REPL, not ClojureScript.

2. In the REPL, switch the session to this project's running build id, :app:

   (shadow.cljs.devtools.api/nrepl-select :app)

   The REPL prompt changes to cljs.user=>, indicating that this is now a ClojureScript REPL.

3. See user.cljs for symbols that are immediately accessible in the REPL without needing to require.

See a list of shadow-cljs CLI actions:

lein run -m shadow.cljs.devtools.cli --help

Please be patient; it may take over 10 seconds to see any output. Also note that some actions shown may not actually be supported, outputting "Unknown action." when run.

Run a shadow-cljs action on this project's build id (without the colon, just app):

lein run -m shadow.cljs.devtools.cli <action> app

The debug? variable in config.cljs defaults to true in dev builds, and false in prod builds.

Use debug? for logging or other tasks that should run only on dev builds:

(ns survey.example
  (:require [survey.config :as config])

(when config/debug?
  (println "This message will appear in the browser console only on dev builds."))

Build the app with the prod profile:

lein release

Please be patient; it may take over 15 seconds to see any output, and over 30 seconds to complete.

The resources/public/js/compiled directory is created, containing the compiled app.js and manifest.edn files.

The resources/public directory contains the complete, production web front end of your app.

Always inspect the resources/public/js/compiled directory prior to deploying the app. Running any lein alias in this project after lein watch will, at the very least, run lein clean, which deletes this generated directory. Further, running lein watch will generate many, much larger development versions of the files in this directory.