{"id":13393326,"url":"https://github.com/rogeriochaves/spades","last_synced_at":"2025-04-06T22:11:07.128Z","repository":{"id":38237980,"uuid":"136499078","full_name":"rogeriochaves/spades","owner":"rogeriochaves","description":"Start an Elm SPA ready to the real world","archived":false,"fork":false,"pushed_at":"2023-05-02T13:30:22.000Z","size":8184,"stargazers_count":300,"open_issues_count":39,"forks_count":19,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-30T21:08:10.279Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rogeriochaves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-06-07T15:45:30.000Z","updated_at":"2025-03-04T10:14:34.000Z","dependencies_parsed_at":"2024-01-08T20:19:01.354Z","dependency_job_id":null,"html_url":"https://github.com/rogeriochaves/spades","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rogeriochaves%2Fspades","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rogeriochaves%2Fspades/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rogeriochaves%2Fspades/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rogeriochaves%2Fspades/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rogeriochaves","download_url":"https://codeload.github.com/rogeriochaves/spades/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:00:50.294Z","updated_at":"2025-04-06T22:11:07.109Z","avatar_url":"https://github.com/rogeriochaves.png","language":"Elm","funding_links":[],"categories":["Elm","Frameworks"],"sub_categories":["Outdated Boilerplates"],"readme":"# Spades\n\n[Spades](https://www.google.com/search?tbm=isch\u0026q=tree%20spade\u0026tbs=imgo:1) 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.\n\nIt has a CLI generating all the necessary Elm boilerplate when adding new components to your application.\n\n## Getting Started\n\n```\nnpm -g install git+https://github.com/rogeriochaves/spades.git\nelm-generate app MyProject\n```\n\n## Generators\n\n### Add new component\n\n```\nelm-generate component Search\n```\n\nThis is the coolest generator, it will create a Search\ncomponent under `src/`, update the main Model, Msg, Update, View and Routes for it\n\n### Add new route\n\n```\nelm-generate route Contact\n```\n\nThis will create a new Page type, route parser and route toPath case on the `src/Router/Routes.elm` file\n\n# Demo\n\n![spades demo](https://user-images.githubusercontent.com/792201/41208764-e2aa697e-6cfc-11e8-96ac-15750f08f8fb.gif)\n\n# Advantages\n\n## Does Elm need a framework?\n\nMostly 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](https://guide.elm-lang.org/architecture/) and a lot of batteries included.\n\nHowever, 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.\n\nWith 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.\n\n## Spades Architecture\n\nJust like all other Elm apps, Spades follows [The Elm Architecture](https://guide.elm-lang.org/architecture/), this architecture basically dictates all the state flow within Elm, but still allows multiple organizations as your app grows.\n\nSpades then follows an organization with domain focus, similar to what is described on [this blogpost](https://medium.com/@_rchaves_/structured-todomvc-example-with-elm-a68d87cd38da).\n\nAnother 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](https://medium.com/@_rchaves_/child-parent-communication-in-elm-outmsg-vs-translator-vs-nomap-patterns-f51b2a25ecb1).\n\n## Code Generators\n\nSome 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.\n\nTo have the readability benefits, without the verbosity pain, Spades comes with a CLI to help generate code.\n\n## Server-Side Rendering\n\nElm apps are usually rendered on the client, but Spades already come with a simple [express](https://expressjs.com/) server that renders the Elm app before sending the HTML to the client, improving performance for the user and [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization).\n\nRead more: https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8\n\nYou can disable this option using the `--serverless` flag while creating your project:\n\n```\nelm-generate app MyProject --serverless\n```\n\n## The best layout system you will ever use\n\nThanks 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\n\nWe 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):\n\nhttps://www.youtube.com/watch?v=NYb2GDWMIm0\n\nSpades 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!\n\n(elm-ui was previously called style-elements, check out what changed [here](https://github.com/mdgriffith/elm-ui/blob/master/CHANGES-FROM-STYLE-ELEMENTS.md))\n\n## Other Batteries Included\n\nAside from the advantaged mentioned above, Spades also comes with:\n\n- Ready for Elm 0.19\n- [elm-test](https://package.elm-lang.org/packages/elm-explorations/test)\n- [Routing and Navigation](https://www.elm-tutorial.org/en/07-routing/cover.html)\n- [Webpack](https://webpack.js.org/) for better development experience and optimized build\n- [RemoteData](http://package.elm-lang.org/packages/krisajenkins/remotedata/latest/RemoteData) for better handling of http request\n- [elm-return](http://package.elm-lang.org/packages/Fresheyeball/elm-return/latest) for better composition of update functions (learn more: https://elmtown.audio/a3e2133b after 38 min)\n\n# Contributing\n\nJust by using the framework and giving feedbacks you'll be helping a lot! You can give suggestions or report bugs on the [issues page](https://github.com/rogeriochaves/spades/issues).\n\nIf you want to contribute with Spades development, take a look on the [existing issues](https://github.com/rogeriochaves/spades/issues) and read the [CONTRIBUTING.md](CONTRIBUTING.md) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frogeriochaves%2Fspades","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frogeriochaves%2Fspades","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frogeriochaves%2Fspades/lists"}