Git Product home page Git Product logo

fulcro-exercises's Introduction

fulcro-exercises

A follow-up to the Minimalist Fulcro Tutorial to get hands dirty with Fulcro and learn and experience the theory in practice, through a series of gradually more challenging exercises.

Prerequisites

  • Studied the Minimalist Fulcro Tutorial
  • Familiar with Clojure, ClojureScript, and at least somewhat with shadow-cljs

Feedback!

Please share your experiences and ideas with me so that I can improve the exercises! Get in touch with @holyjak in the #fulcro channel of the Clojurians Slack or in Zulip or by starting a discussion here at GitHub.

Usage

Prerequisites: same as the shadow-cljs requirements.

Clone this repo, enter the directory. Then install prerequisites:

npm install 
# or: yarn install  # reportedly yarn < v3 as of 8/2021

Part 1: The exercises

Compile the ClojureScript code and start a server for the UI:

npx shadow-cljs watch main
# or `bb run` if you have Babashka

NOTE: For Calva, do instead start the REPL from the editor - run Jack-in, selecting shadow-cljs then the :main build. Remember to load the page in the browser, see below.

NOTE: For Emacs, connect to the REPL using M-x cider-connect-cljs

BEWARE: It might not work if your version of the Clojure CLI (clojure --version) is too old or, possibly, too new. The project has been tested with v.1.10.3.855.

You can now see the application at http://localhost:8000. Open it in Chrome, where you have installed Fulcro Inspect and enabled custom formatters!

Now (after having accessed the web page!) connect to the cljs REPL: first connect to the nREPL running at port 9001 then execute (shadow/repl :main) there. (If you get "No available JS runtime." then you likely forgot to load the page in a browser first.)

Finally, open the holyjak.fulcro-exercises namespace and get coding, following the instructions provided there in the ns docstring!

TIP: Make sure that you select the correct App at the bottom of Fulcro Inspect, if there are multiple (or hard-reload the page to get rid of all the past ones).

Troubleshooting and getting help during the exercises

Use repeatedly (hint <exercise number>) (as long as there are any more hints for the exercise) to get useful tips when you get stuck.

Leverage the Fulcro Troubleshooting Decision Tree to help you troubleshoot your problems.

Leverage Fulcro Inspect (especially the DB and perhaps Element tabs), check the Chrome JS Console for warnings and errors.

Various problems and solutions

Fulcro Inspect shows an empty client DB

It might help to close it, reload the page, then open it again.

'shadow-cljs - (reload failed)' reported in the browser

If shadow-cljs fails because of a coding error then this error is reported in the browser. It may break live reloading, i.e. you might need to hard-reload the page after you fix it.

Part 2: Fulcro Puzzles

After you have completed the exercises, you can check you insight and troubleshooting skill by fixing the broken pieces of code presented in the holyjak.fulcro-exercises.puzzles.puzzles-ws namespace.

To run the puzzles, stop the exercises process and run instead this:

npx shadow-cljs watch puzzles
# or `bb run-puzzles` if you have Babashka

NOTE: For Calva, do instead start the REPL from the editor - run Jack-in, selecting shadow-cljs then the :puzzles build.

Then navigate to http://localhost:8023/ and in the left-side menu, under Cards, select the first puzzle card.

Try to fix the code so that the card does what it is supposed to. Remember to use primarily the Fulcro Database and Fulcro Inspector for the troubleshooting! If you get stuck or after you finish your solution, compare it to the solution in the holyjak.fulcro-exercises.puzzles.solutions-ws namespace.

License

Copyleft © 2021 Jakub Holý

Distributed under the Unlicense.

fulcro-exercises's People

Contributors

holyjak 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.