• Stars
    star
    301
  • Rank 133,588 (Top 3 %)
  • Language
    Elm
  • Created almost 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Start an Elm SPA ready to the real world

Spades

Spades is a framework for Elm that helps you quickly start a Single Page Application (SPA) ready to the real world, with an opinionated structure that allows your app to grow easily and well organized.

It has a CLI generating all the necessary Elm boilerplate when adding new components to your application.

Getting Started

npm -g install git+https://github.com/rogeriochaves/spades.git
elm-generate app MyProject

Generators

Add new component

elm-generate component Search

This is the coolest generator, it will create a Search component under src/, update the main Model, Msg, Update, View and Routes for it

Add new route

elm-generate route Contact

This will create a new Page type, route parser and route toPath case on the src/Router/Routes.elm file

Demo

spades demo

Advantages

Does Elm need a framework?

Mostly not, at least much less than other programming languages, because Elm is already very focused on being the best language for frontend web development, has an enforced architecture and a lot of batteries included.

However, it is still a language, not a framework, therefore it can't define somethings such as how you organize your files, how you scale the architecture, how you deploy your app, which libraries to use, among other things which are usually a source of concern to beginners.

With time, it is possible that more and more things are implemented on the language and removed from this framework, leaving maybe just the initial boilerplate and the code generators.

Spades Architecture

Just like all other Elm apps, Spades follows The Elm Architecture, this architecture basically dictates all the state flow within Elm, but still allows multiple organizations as your app grows.

Spades then follows an organization with domain focus, similar to what is described on this blogpost.

Another important thing in a real-world Elm app is a solution for parent-child communication, for that part, Spades uses the NoMap pattern described on this other blogpost.

Code Generators

Some people find Elm code very verbose, and that the architecture needs too much boilerplate to work. This is the intentional trade-off that the Elm Language choose to leave the language as simple, readable and explicit as possible.

To have the readability benefits, without the verbosity pain, Spades comes with a CLI to help generate code.

Server-Side Rendering

Elm apps are usually rendered on the client, but Spades already come with a simple express server that renders the Elm app before sending the HTML to the client, improving performance for the user and SEO.

Read more: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

You can disable this option using the --serverless flag while creating your project:

elm-generate app MyProject --serverless

The best layout system you will ever use

Thanks to Elm awesome type system and abstraction of the HTML the community could see things more clearly, and came up with a better way of layouting: elm-ui

We recommend watching this talk by Matthew Griffith, the creator of elm-ui, to understant how it works (elm-ui was still called style-elements back then):

https://www.youtube.com/watch?v=NYb2GDWMIm0

Spades comes with elm-ui by default, and although you can remove it and use the standard html library, we really recommend you to give it a shot, you won't regret!

(elm-ui was previously called style-elements, check out what changed here)

Other Batteries Included

Aside from the advantaged mentioned above, Spades also comes with:

Contributing

Just by using the framework and giving feedbacks you'll be helping a lot! You can give suggestions or report bugs on the issues page.

If you want to contribute with Spades development, take a look on the existing issues and read the CONTRIBUTING.md file.

More Repositories

1

npm-force-resolutions

Force npm to install a specific transitive dependency version
Clojure
559
star
2

langstream

Build robust LLM applications with true composability 🔗
Python
354
star
3

driver

Python
116
star
4

feedless

Swift
102
star
5

elm-peer-tweet

Decentralized feeds using BitTorrent's DHT. Based on lmatteis' peer-tweet.
Elm
85
star
6

structured-elm-todomvc

Structured TodoMVC with Elm to exemplify real-world apps
72
star
7

bmo

BMO is a ChatGPT voice assistant
Python
60
star
8

remote-retrospectives

Have fun retrospectives using Google Docs
46
star
9

elm-test-bdd-style

BDD-style matchers for elm-test
Elm
37
star
10

react-decompiler

Decompile react components back into jsx format
JavaScript
28
star
11

jasmine-react-diff

Outputs nicely formated jsx when diffing two react components
JavaScript
24
star
12

pictureit-editor

TypeScript
23
star
13

NodeJS-MotionCAPTCHA

josscrowcroft's MotionCAPTCHA server-side validated with NodeJS
JavaScript
19
star
14

elm-suspense

Recreating react-suspense features using elm
Elm
15
star
15

rastreiounico

Rastreie qualquer coisa, pra qualquer um, com um clique, de graça, sem cadastro.
JavaScript
11
star
16

elm-todomvc-pwa

elm-todomvc with pwa features
Elm
10
star
17

notebooks

I'll munch some data here
Jupyter Notebook
10
star
18

unbreakablejs

JavaScript without runtime errors
Elm
9
star
19

codesearch

TypeScript
7
star
20

safe-externals-loader

Load webpack externals only if they are available globally, else require them
JavaScript
6
star
21

elm-ternary

Ternary and Null Coalescing operators for Elm
Elm
6
star
22

elm-test-example

Elm
6
star
23

Reactbox

A true responsive lightbox, when in mobile, it allows you to zoom and scroll the bigger image
JavaScript
6
star
24

rubber

Evaluate LaTeX math code
Elm
5
star
25

ml-101

Jupyter Notebook
5
star
26

unit

Universal Test Generator
Rust
5
star
27

simple-platform

Docker Machine + Ngninx + Prometheus + Grafana to provision on a single host
Shell
5
star
28

oltwitter

Good Ol' Twitter UI, rebuilt
Swift
4
star
29

llm-cost

NodeJS utility for counting tokens and estimating the cost of LLMs
TypeScript
3
star
30

atom-spec-finder

Shortcut for atom editor to switch between the file and its spec
CoffeeScript
3
star
31

gpt2-bot

Python
3
star
32

require-js-plugins-loader

A webpack loader to lazy load RequireJS plugins
JavaScript
3
star
33

sublime-spec-finder

Shortcut for sublime text to switch between the file and it's spec
Python
3
star
34

ptbr-datascience-crawler

Scrapes links from Pt-BR Data Science telegram group because they are too good to miss
Python
3
star
35

FOADocs

Sistema de controle de arquivos e versão para projetos acadêmicos utilizando cloud storage
Ruby
3
star
36

signal-concat-map

ConcatMap for Elm Signals
JavaScript
3
star
37

bayes-akinator

Building Akinator with Python using Bayes Theorem
Python
3
star
38

mle

Elm
2
star
39

elm-testable-css-helpers

Wraper for elm-testable of helper functions for using elm-css with elm-html
Elm
2
star
40

backbone-indexeddb-offline

Allows your Backbone.js app to work offline using indexeddb
2
star
41

chatje

basic version of workchat, because the facebook one is slow as hell
Elm
2
star
42

dotfiles

Shell
2
star
43

perl-tdd-runner

Run Perl tests continuously
Perl
2
star
44

blog

my php (personal home page)
Stylus
2
star
45

astah-anycode-rails

Generate scaffolds from your astah classes
2
star
46

stop-touching-your-face

Uses your camera to buzz you when you touch your face
JavaScript
2
star
47

react_editable_content

let you edit block of text or image in any page on your Rails application
JavaScript
2
star
48

matrizes-clifford

cálculos simples de matriz para a aula do clifford
Ruby
2
star
49

memekombat

The best game that existed on facebook circa 2012
JavaScript
2
star
50

langchain-docs-bot

A simple docs retrieval bot, indexing markdown and jupyter notebooks, which also can have a conversation, built using langchain and vectordb, with a nice chainlit UI
Python
1
star
51

Combina--o-de-Conjuntos

Ruby
1
star
52

Jogo-da-Ket

Online Multiplayer Facebook Card Game in Node.JS with socket.io
JavaScript
1
star
53

newgen-js-bundlers

Comparing new generation of JS bundlers
JavaScript
1
star
54

log-filter

filter repetitive logs and focus on the different ones
Perl
1
star
55

hastext

Clone of a social network based on micro-blogging in Elm
Haskell
1
star
56

prepack-elm-poc

Elm
1
star
57

JavaScript-vs-CSS-animations-tests

JavaScript
1
star
58

forecaster

probability weighted weather forecasts
Jupyter Notebook
1
star
59

babel-plugin-unbreakablejs

No runtime errors for javascript!
JavaScript
1
star
60

SEO-Friendly-Single-Page-Website

Create a stylish single-page website without losing links based navigation ;)
JavaScript
1
star
61

spree_pagseguro

deprecated - não use
Ruby
1
star
62

yyyy_mm_dd

Easy string-based date manipulation library for Python
Python
1
star