All Projects → seed-rs → Seed Rs Realworld

seed-rs / Seed Rs Realworld

Licence: mit
Exemplary real world application built with Seed

Programming Languages

rust
11053 projects

Projects that are alternatives of or similar to Seed Rs Realworld

Awesome Seed Rs
A curated list of awesome things related to Seed
Stars: ✭ 101 (+31.17%)
Mutual labels:  framework, seed, wasm, frontend
Quasar
An experimental rust-to-{wasm,asmjs} frontend framework.
Stars: ✭ 180 (+133.77%)
Mutual labels:  framework, wasm, frontend
Framework
A modular front-end framework - inspired by the server-side and Web Components.
Stars: ✭ 448 (+481.82%)
Mutual labels:  framework, frontend
San
A fast, portable, flexible JavaScript component framework
Stars: ✭ 4,514 (+5762.34%)
Mutual labels:  framework, frontend
Expo Three Demo
🍎👩‍🏫 Collection of Demos for THREE.js in Expo!
Stars: ✭ 76 (-1.3%)
Mutual labels:  example, frontend
Axentix
Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. The easy layout control and grid system makes it one of the most easy to learn framework.
Stars: ✭ 75 (-2.6%)
Mutual labels:  framework, frontend
Fritz2
Easily build reactive web-apps in Kotlin based on flows and coroutines.
Stars: ✭ 308 (+300%)
Mutual labels:  framework, frontend
Displayjs
A simple JavaScript framework for building ambitious UIs 😊
Stars: ✭ 590 (+666.23%)
Mutual labels:  framework, frontend
Bem Core
BEM Core Library
Stars: ✭ 275 (+257.14%)
Mutual labels:  framework, frontend
Primitive
⛏️ ‎ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+916.88%)
Mutual labels:  framework, frontend
Kvision
Object oriented web framework for Kotlin/JS
Stars: ✭ 658 (+754.55%)
Mutual labels:  framework, frontend
Vue Bootstrap With Material Design
Vue Bootstrap with Material Design - Powerful and free UI KIT
Stars: ✭ 803 (+942.86%)
Mutual labels:  framework, frontend
Mini.css
A minimal, responsive, style-agnostic CSS framework!
Stars: ✭ 2,938 (+3715.58%)
Mutual labels:  framework, frontend
Cleancppproject
Clean C++ project for you to use. Features: Modern CMake, CPack, Doxygen, PlantUML, Catch Unit testing, static analysis
Stars: ✭ 276 (+258.44%)
Mutual labels:  framework, example
Vuefront
VueFront Core. Turn your old-fashioned CMS website in to a SPA & PWA in 5 minutes
Stars: ✭ 316 (+310.39%)
Mutual labels:  framework, frontend
Front End Web Development Resources
This repository contains content which will be helpful in your journey as a front-end Web Developer
Stars: ✭ 3,452 (+4383.12%)
Mutual labels:  framework, frontend
Korolev
Single Page Applications running on the server side.
Stars: ✭ 510 (+562.34%)
Mutual labels:  framework, frontend
Aurelia
Aurelia 2, a standards-based, front-end framework designed for high-performing, ambitious applications.
Stars: ✭ 995 (+1192.21%)
Mutual labels:  framework, frontend
movies
Real world isomorphic application for movies search, based on Webpack 5 / Express / React 17 + Redux-Saga / Bootstrap 4.6 + CSS Modules / i18next / SSR
Stars: ✭ 20 (-74.03%)
Mutual labels:  example, realworld
Choo Handbook
🚂✋📖 - Learn the choo framework through a set of exercises
Stars: ✭ 266 (+245.45%)
Mutual labels:  framework, frontend

Netlify Status

RealWorld Example App

Seed codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Demo     RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with Seed including CRUD operations, authentication, routing, pagination, and more.

We've gone to great lengths to adhere to the Seed community styleguides & best practices.

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.


NOTE: This project uses older Seed version 0.5.1. It will be updated and refactored once Seeder is ready. Please see built-in examples and other projects instead.


How it works

I think the best way to show you how it works is to describe what's going on step by step when you open this example in your browser. So let's say you've just written https://seed-rs-realworld.netlify.com/ to URL bar and pressed Enter:

  1. Netlify redirects your request to index.html. (See /netlify.toml.)
  2. There is a script in /index.html that loads wasm file and starts application.
  3. Application is initialized in /src/lib.rs - see block Start at the end of that file.
  4. The first is called function before_mount (we are still in file lib.rs):
    1. You can select mount point with .mount_point("element-id"). But the default one (app) is good for us.
    2. .mount_type(MountType::Takeover) means that the previous HTML content in the mount point will be replaced with the application HTML.
  5. Then the function after_mount is called:
    1. It tries to load Viewer from the local storage. Viewer is the object that contains info about currently logged in user (name, auth. token, avatar image url, etc).
    2. Then it creates a new Session with Viewer (or without it if you are not logged in). Session is de facto shared state - you are able to get it from all pages.
    3. Then the Model is created with Session. Model is enum, where each variant represents one page. Here, in init function, we create Model from variant Redirect because we haven't decided yet which page to show (i.e. Redirect is a "placeholder" variant).
    4. And we also try to parse given URL and send result to Seed's runtime.
  6. after_mount function also sends message RouteChanged which is handled in update function. Handler calls function change_model_by_route which choose the right Model according to the URL path.
  7. Model::Home is chosen in our example. However this variant should contain "sub-model" from /src/page/home so we need to call page::home::init(..) to get it.
  8. page::home::init loads required data (e.g. article feed or tags).
  9. We have data to show so when Seed's runtime calls View function again we can see it rendered in the browser.

We didn't talked about function sink in lib.rs in the steps above. sink has the similar purpose like update function but it handles global messages. It's the way how modules communicate with parents or with other modules. The most use case is to send GMsg::RoutePushed when we want to go to another page (see function go_to in /src/route.rs).

Getting started

  1. Install Rust
  2. Update Rust: $ rustup update
  3. Install WASM target: $ rustup target add wasm32-unknown-unknown
  4. Install cargo-make: $ cargo install --force cargo-make
  5. Build project from its root: $ cargo make all or $ cargo make watch
    • Note: You need some dependencies like pkg-config on Linux - just follow recommendations after compilation errors.
  6. Start local server: $ cargo make serve
    • Note: You have to open a new terminal tab/window if you used $ cargo make watch.
  7. Open in you browser localhost:8000

Contributing

  1. Create issues and PRs - bugs, missing documentation, typos, unreadable code...
  2. Squash commits, rebase on the current master and run $ cargo make verify (+ commit changes, if any) before creating PR.

Statistics

$ tokei
-------------------------------------------------------------------------------
 Language            Files        Lines         Code     Comments       Blanks
-------------------------------------------------------------------------------
 HTML                    1           21           19            2            0
 Markdown                1           66           66            0            0
 Rust                   81         5899         4869          344          686
 SVG                     1           17           17            0            0
 TOML                    4          199          146           20           33
-------------------------------------------------------------------------------
 Total                  88         6202         5117          366          719
-------------------------------------------------------------------------------
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].