awkay / om-tutorial

WORK IN PROGRESS

Om Tutorial Code

This is a project holding an Om (next) project that is to be used as the basis of a complete overview of the features of Om. For simplicity, the server-side component is simulated in the browser. The code you would write on the server is identical (though you will need some minor plumbing to do the actual network bits).

I try to keep it running at https://awkay.github.io/om-tutorial/, though it is really meant to be cloned locally, as the exercises have you edit the code.

What's inside?

The organization is in flux. The top-level src directory contains:

• tutorial: Devcards with a live tutorial (in progress)
• main: A demo application with simulated remote server (in progress, but working with Om master or alpha25+)
• cards : Some development/tests written in devcards

The latter two are for my internal purposes at the moment, so you can largely ignore them.

Running it

There is a clojure script in the script folder. You can run it with lein or in Cursive (Run..., Add a Clojure Local REPL, Run with Clojure Main (NOT nREPL!), parameters script/figwheel.clj) or at the command line with:

lein run -m clojure.main script/figwheel.clj

Using Emacs, just start up the repl with cider-jack-in (or connect to a running lein repl), and evaluate the contents of script/figwheel.clj in the repl. Similar steps should work find for fireplace in Vim.

Then browse to the following URL:

http://localhost:3450   Devcards-based Tutorial (start here)

Expect things to change often...this is a work in progress that may take several weeks or even months. If you'd like to contribute, I'd love the help. Ping me on Slack (@tony.kay) so we don't stomp on each other.

Some things I'd like to have (but don't have the time to get to):

• Docs in the UI section (or a subsection) that talk about more basics of (stateless) UI. E.g. more references to React docs, what the #js stuff is about and why you only do it on dom elements. Basic gotchas for beginners. Bonus points if anyone wants to hack the cljs ecosystem so that code pretty-printing can handle #js.
• CSS for anything you think is too ugly

Figwheel notes

Once the figwheel REPL is going, you can clean and rebuild with

(reset-autobuild)

after which you probably want to reload the page in your browser to clear out any cruft.

om-tutorial's Issues

B_UI_Exercises.cljs: om-person instead of person

Hi,

is there is a mistake in B_UI_Exercises.cljs at ...(defui PeopleWidget...?
I think this row

                                 (dom/ul nil (map #(person %) people))))

has to be

                                 (dom/ul nil (map #(om-person %) people))))

Do i get something wrong?

Cheers
Michael

link for the github pages

Can you add the link to https://awkay.github.io/om-tutorial/ at the repository page please?

Please provide Solutions for Exercises

I have the following solution to UI exercises, not sure if they are correct?

(defui Person
  ;; TODO: Add a query for :db/id, :person/name, and a recursive access of :person/mate
  ;; TODO: Add an ident that uses :db/id
  Object
  (initLocalState [this] {:checked false})
  (render [this]
    (let [{:keys [person/name person/mate]} (om/props this)
          {:keys [onDelete]} (om/get-computed this)
          checked (om/get-state this :checked)]
      (dom/li nil
        (dom/input #js {:type    "checkbox"
                        :onClick #(om/update-state! this update :checked not)
                        :checked (om/get-state this :checked)})
        (if checked
          (dom/b nil name)
          (dom/span nil name))
        (when onDelete
          (dom/button #js {:onClick #(onDelete name)} "X"))
        (when mate (dom/ul nil (om-person mate)))))))

(defui PeopleWidget
  Object
  (render [this]
    ; TODO: (ex 4): Create a deletePerson function
    (let [{:keys [people]} (om/props this)]                                        ; TODO (ex 2): Get yo stuff
      (dom/div nil
        (if (= nil people)
          (dom/span nil "Loading...")
          (dom/div nil
            (dom/button #js {} "Save")
            (dom/button #js {} "Refresh List")
            ; TODO: (ex 4) pass deletePerson as the onDelete handler to person element
            (dom/ul nil (map #(om-person %) people))))))))

(def people-widget (om/factory PeopleWidget))

(defui Root
  Object
  (render [this]
    (let [{:keys [widget new-person last-error]} (om/props this)]
                                   ; TODO (ex 2): Get yo stuff
      (dom/div nil
        (dom/div nil (when (not= "" last-error) (str "Error " last-error)))
        (dom/div nil
          (people-widget widget)
          (dom/input #js {:type "text"})
          (dom/button #js {} "Add Person"))))))

Just playing and learning ;)

I sometimes get:

Each child in an array or iterator should have a unique "key" prop. Check the render method ofom_tutorial$B_UI_Exercises$PeopleWidget. See https://fb.me/react-warning-keys for more information.

Not sure why this happens and how to fix it? Thanks :)

Syntax deviation from clojure style guide related to parens positioning

In many places a "trailing paren on new line" style is used, which conflicts with the style guide: https://github.com/bbatsov/clojure-style-guide#gather-trailing-parens

If this is just a remnant of refactoring or something similar, sorry for the noise. However if the project is ready for this "beautification" and you just have higher priority tasks, then I can lend a hand. :)

Scroll up when navigating

Shouldn't the page scroll up when navigating to the next section?

Wrong app state in State tutorial ?

Isn't this line supposed to read:

(def app-state (atom {:a 1 :user {:user/name \"Sam\"} :c 99}))

instead ?

Some notes on exercises

In B_ exercises, it asks you to make a list item Bold. After googling, there seemed to be some (dom/span #js {:style {:font-style "bold"}} person) solutions in Om at some point - but I couldn't get them to work. A quick example on how to make text inside Om would've made that simpler for me. (I still don't know.)

In C_ exercises, the first exercise tests against a tabled named cars-table, asks you to name your table :cars/by-id, and refers a table called cars-table from somewhere else. I removed the refer and named my table cars-table to get the exercise to pass. Edit: It turns out that all the exercises ask for a tabled named in the refer at the top. Naming a new var the same name gives a warning and doesn't seem to work.

Error in browser console - Maximum call stack size exceeded core.cljs:4629

On every reload I am getting the following error in console

Uncaught Range Error: Maximum call stack size exceeded cljs$core$tail_off @ core.cljs:4629
cljs.core.PersistentVector.cljs$core$ICollection$_conj$arity$2 @ core.cljs:4770
cljs$core$_conj @ core.cljs:470cljs.core.conj.cljs$core$IFn$_invoke$arity$2 @ core.cljs:1572
(anonymous function) @ core.cljs:9424
(anonymous function) @ core.cljs:4869
(anonymous function) @ core.cljs:4869
cljs.core.PersistentVector.cljs$core$IReduce$_reduce$arity$3 @ core.cljs:4873
cljs.core.reduce.cljs$core$IFn$_invoke$arity$3 @ core.cljs:2197
cljs$core$group_by @ core.cljs:9421
utils.cljs?rel=1449115188238:38 
Figwheel: trying to open cljs reload socket

How to handle websocket push events in om.next

From your turtorial my guess it that the way to handle websockets push messages is to use om/transact! in the websocket eventhandler?

However in the following youtube video:
https://www.youtube.com/watch?v=IlNrmKYA7Ig

There is a comment about handling websockets push messages but im not understanding what that comment actually is.