fulcro

A library for development of single-page full-stack web applications in clj/cljs

1,567

142

1,567

View on GitHub

Top Related Projects

re-frame

5,463

A ClojureScript framework for building user interfaces, leveraging React

datascript

5,580

Immutable database and Datalog query engine for Clojure, ClojureScript and JS

reitit

1,474

A fast data-driven routing library for Clojure/Script

compojure

4,103

A concise routing library for Ring/Clojure

reagent

4,811

A minimalistic ClojureScript interface to React.js

metabase

41,759

The easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:

Quick Overview

Fulcro is a full-stack web framework for Clojure and ClojureScript. It provides a comprehensive solution for building single-page applications with server-side rendering capabilities, focusing on simplicity, productivity, and maintainability. Fulcro leverages React for the UI and includes built-in state management, networking, and routing features.

Pros

Unified full-stack development experience in Clojure(Script)
Built-in state management and data normalization
Powerful component model with co-located queries
Excellent integration with React and server-side rendering

Cons

Steep learning curve for developers new to Clojure or functional programming
Smaller community compared to mainstream JavaScript frameworks
Limited ecosystem of third-party components and libraries
Can be overkill for simple applications

Code Examples

Defining a Fulcro component:

(ns my-app.ui.root
  (:require [com.fulcrologic.fulcro.components :as comp :refer [defsc]]))

(defsc HelloWorld [this {:keys [name]}]
  {:query [:name]
   :initial-state {:name "World"}}
  (dom/div (str "Hello, " name "!")))

(def ui-hello-world (comp/factory HelloWorld))

Defining a mutation:

(ns my-app.mutations
  (:require [com.fulcrologic.fulcro.mutations :as m]))

(m/defmutation update-name [{:keys [new-name]}]
  (action [{:keys [state]}]
    (swap! state assoc :name new-name)))

Using the mutation in a component:

(defsc NameChanger [this {:keys [name]}]
  {:query [:name]
   :initial-state {:name "World"}}
  (dom/div
    (dom/input {:value name
                :onChange #(comp/transact! this [(update-name {:new-name (.. % -target -value)})])})
    (dom/p (str "Hello, " name "!"))))

Getting Started

Add Fulcro dependency to your project.clj:

[com.fulcrologic/fulcro "3.5.27"]

Create a new Fulcro application:

(ns my-app.client
  (:require [com.fulcrologic.fulcro.application :as app]
            [com.fulcrologic.fulcro.components :as comp]
            [my-app.ui.root :refer [Root]]))

(defonce app (app/fulcro-app))

(defn init []
  (app/mount! app Root "app-root")
  (js/console.log "Application initialized."))

(init)

Run your Clojure(Script) build process and start developing your Fulcro application!

Competitor Comparisons

re-frame

5,463

A ClojureScript framework for building user interfaces, leveraging React

Pros of re-frame

Simpler learning curve and easier to get started
More lightweight and flexible, allowing for easier integration with existing projects
Larger community and ecosystem, with more resources and third-party libraries available

Cons of re-frame

Less opinionated, which can lead to inconsistent application structure across projects
Lacks built-in support for server-side rendering and other advanced features
May require more manual configuration for complex applications

Code Comparison

re-frame:

(rf/reg-event-db
 :initialize-db
 (fn [_ _]
   {:name "re-frame"}))

(rf/reg-sub
 :name
 (fn [db]
   (:name db)))

Fulcro:

(defsc Root [this {:keys [name]}]
  {:query [:name]
   :initial-state {:name "Fulcro"}}
  (dom/div name))

(def ui-root (comp/factory Root))

The re-frame example shows event and subscription registration, while the Fulcro example demonstrates component definition with co-located queries and initial state. Fulcro's approach is more declarative and centralized, whereas re-frame separates concerns into distinct parts of the application.

datascript

5,580

Immutable database and Datalog query engine for Clojure, ClojureScript and JS

Pros of DataScript

Lightweight and focused on in-memory database functionality
Easier to learn and integrate into existing projects
More flexible for use in various application architectures

Cons of DataScript

Lacks built-in UI components and state management features
Requires additional libraries for full-stack application development
Less opinionated, which may lead to inconsistent application structure

Code Comparison

DataScript query example:

(d/q '[:find ?e ?name
       :where [?e :name ?name]
              [?e :age ?age]
              [(> ?age 30)]]
     @conn)

Fulcro query example:

(defsc Person [this {:keys [db/id name age]}]
  {:query [:db/id :name :age]
   :ident :db/id}
  (dom/div
    (dom/p name)
    (dom/p (str "Age: " age))))

DataScript focuses on database operations and querying, while Fulcro provides a more comprehensive framework for building full-stack applications, including UI components and state management. DataScript is more suitable for projects that require a lightweight, in-memory database solution, whereas Fulcro is better suited for larger, more complex applications that benefit from its opinionated structure and full-stack capabilities.

reitit

1,474

A fast data-driven routing library for Clojure/Script

Pros of Reitit

Lightweight and focused on routing, allowing for more flexibility in overall application architecture
Excellent performance due to its optimized design
Supports both Clojure and ClojureScript, making it versatile for full-stack development

Cons of Reitit

Less opinionated and doesn't provide a full-fledged framework like Fulcro
Requires more manual integration with other libraries for a complete application stack
May have a steeper learning curve for beginners due to its flexibility

Code Comparison

Reitit routing example:

(def router
  (reitit/router
    [["/api"
      ["/users" {:get {:handler get-users-handler}}]
      ["/user/:id" {:get {:handler get-user-handler
                          :parameters {:path {:id int?}}}}]]]))

Fulcro routing example:

(defsc Root [this props]
  {:query [{:router (comp/get-query Router)}]
   :initial-state {:router {}}}
  (let [{:keys [router]} props]
    (dom/div
      (ui-router router))))

The code examples showcase the different approaches to routing in Reitit and Fulcro. Reitit focuses on defining routes and their handlers, while Fulcro integrates routing within its component-based architecture.

compojure

4,103

A concise routing library for Ring/Clojure

Pros of Compojure

Lightweight and focused on routing, making it easier to learn and integrate
More flexible for building custom web applications
Better suited for smaller projects or microservices

Cons of Compojure

Less comprehensive, requiring additional libraries for full-stack development
Lacks built-in state management and UI components
May require more boilerplate code for complex applications

Code Comparison

Compojure routing example:

(defroutes app-routes
  (GET "/" [] "Hello World")
  (GET "/users/:id" [id] (str "User " id))
  (POST "/users" {params :params} (create-user params))
  (route/not-found "Not Found"))

Fulcro routing example:

(defsc Root [this props]
  {:query         [{:router (comp/get-query Router)}]
   :initial-state {:router {}}}
  (dom/div
    (com.fulcrologic.fulcro.routing/router-component Router)))

Compojure focuses on simple routing definitions, while Fulcro provides a more comprehensive approach to application structure and state management. Compojure is ideal for developers who want fine-grained control over their web application structure, whereas Fulcro offers a more opinionated and feature-rich framework for building full-stack Clojure applications.

reagent

4,811

A minimalistic ClojureScript interface to React.js

Pros of Reagent

Simpler and more lightweight, making it easier to learn and use for small to medium-sized projects
Closer to vanilla React, allowing for easier integration with existing React libraries and components
More flexible and less opinionated, giving developers more freedom in structuring their applications

Cons of Reagent

Less comprehensive, lacking built-in solutions for complex state management and data normalization
Requires additional libraries or custom solutions for handling larger, more complex applications
Limited built-in support for optimizing performance in large-scale applications

Code Comparison

Reagent component:

(defn hello-world []
  [:div
   [:h1 "Hello, World!"]
   [:p "Welcome to Reagent"]])

Fulcro component:

(defsc HelloWorld [this props]
  {:query []
   :initial-state {}}
  (dom/div
    (dom/h1 "Hello, World!")
    (dom/p "Welcome to Fulcro")))

Reagent focuses on simplicity and a more React-like syntax, while Fulcro provides a more structured approach with built-in query and state management capabilities. Reagent is often preferred for smaller projects or when integrating with existing React ecosystems, while Fulcro shines in larger, more complex applications that benefit from its comprehensive feature set and performance optimizations.

metabase

41,759

The easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:

Pros of Metabase

More comprehensive business intelligence and data visualization solution
User-friendly interface for non-technical users to create dashboards and reports
Supports multiple databases and data sources out of the box

Cons of Metabase

Less flexible for custom application development
Steeper learning curve for developers wanting to extend or customize the platform
Limited support for real-time data updates

Code Comparison

Metabase (JavaScript):

const question = Question.create({
  name: "My Custom Question",
  query: {
    "source-table": 1,
    aggregation: [["count"]],
    breakout: [["field", 2, null]]
  }
});

Fulcro (ClojureScript):

(defsc MyComponent [this {:keys [data]}]
  {:query [:data]
   :ident (fn [] [:component/id :my-component])}
  (dom/div
    (str "Data: " data)))

While Metabase focuses on providing a complete BI solution with a user-friendly interface, Fulcro is a framework for building complex web applications with a focus on data-driven architecture. Metabase is better suited for organizations needing quick insights from their data, while Fulcro offers more flexibility for custom application development.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

:source-highlighter: coderay :source-language: clojure :toc: :toc-placement: preamble :sectlinks: :sectanchors: :sectnums:

image:docs/logo.png[]

image:https://img.shields.io/clojars/v/com.fulcrologic/fulcro.svg[link=https://clojars.org/com.fulcrologic/fulcro] image:https://circleci.com/gh/fulcrologic/fulcro/tree/main.svg?style=svg["CircleCI", link="https://circleci.com/gh/fulcrologic/fulcro/tree/main"]

Fulcro is a library for building data-driven full-stack applications for the web, native, and desktop (via electron). It uses React and is written in Clojure and Clojurescript.

== Fulcro 3.8 Important Notice

Fulcro 3.8+ use a new version of Fulcro Inspect, and it requires you change how you build the development version of your app. Old versions of Fulcro Inspect Electron and Chrome will not work with Fulcro 3.8+.

The rewrite of Fulcro Inspect is available via the releases page of https://github.com/fulcrologic/fulcro-inspect/releases[Fulcro Inspect]. And there are preliminary instructions for using it with the latest Fulcro.

The alpha versions of Fulcro 3.8 are alpha purely because of this development-time change and its potential issues, and are otherwise production ready.

== Trying it Out

The documentation for this version is in the http://book.fulcrologic.com/[Developer's Guide]. If you're using Fulcro 2, you can still read the http://book.fulcrologic.com/fulcro2[prior version of the guide].

There is also a https://github.com/fulcrologic/fulcro-template[template project] which you can use as a starting point.

Finally, there is a plenty of great resources collected at the https://fulcro-community.github.io/[Fulcro Community] site.

== Contributing to Fulcro

For learning more about how to contribute to the Fulcro project, please refer https://github.com/fulcrologic/fulcro/blob/main/CONTRIBUTING.md[CONTRIBUTING.md]

== Copyright and License

Fulcro is:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot