- React for components
- Component definitions with co-located queries and mutations
- GraphQL for client-side state management
- GraphQL for server queries and mutations
- Prefer data over code (i.e. Hiccup-style UI definitions)
- Two-level API:
- Low-level: Functions for creating components, mutations, queries
- High-level: Macro-based DSL for creating components, mutations, queries
- Server-side rendering (SSR)
- React Native support out of the box
- Encourage spec-driven development
- Sablono (for Hiccup-style UI composition)
- Apollo (for everything GraphQL)
groom.graphql
: ClojureScript bindings for everything Apollo and GraphQLgroom.graphql.apollo
: ClojureScript bindings for Apollogroom.graphql.graphql
: ClojureScript bindings for GraphQL
groom.resolvers
: Library for defining client-side query and mutation resolvers convenientlygroom.ui
: Low-level library for defining and rendering componentsgroom.dsl
: High-level macro-based DSL for defining components, queries and mutationsgroom.specs.v1
: Specs for whatever makes sense (TODO: Work this out in more detail):groom.specs.v1/queries
for Groom's Clojure-style query definitions:groom.specs.v1/mutations
for Groom's Clojure-style mutation definitions
TODO
(def starship
(groom.ui/component
{:queries '[(starship {?id ID!}
[:id
:name
:length
:isSelected +client])]
:mutations '[(selectShip {?id ID!}
(selectShip {id ?id} +client [:id]))]
:render (fn [{:keys [data selectShip]}]
(if (:loading data)
[:div "Loading..."]
(let [starship (:starship data)]
[:div {:on-click selectShip
:style (when (:isSelected starship)
{:background-color "orange"})}
(:name starship)])))}))
(def starwars-ships
(groom.ui/component
{:render (fn [props]
[:ul
[:li [starship {:id "3000"}]]
[:li [starship {:id "3001"}]]
[:li [starship {:id "3002"}]]])}))
TODO
TODO
(require '[groom.dsl :refer [defcomponent]])
(defcomponent starship
(queries
[(starship {?id ID!}
[:id
:name
:length
:isSelected +client])])
(mutations
[(selectShip {?id ID!}
(selectShip {id ?id} +client [:id]))])
(render
(if loading?
[:div "Loading..."]
[:div {:on-click selectShip
:style (when (:isSelected starship) {:background-color "orange"})}
(:name starship)])))
(defcomponent starwars-ships
(render
[:ul
[:li [starship {:id "3000"}]]
[:li [starship {:id "3001"}]]
[:li [starship {:id "3002"}]]]))
TODO