This codebase was created to demonstrate application frontend built with AppRun including CRUD operations, authentication, routing, pagination, and more.
We've gone to great lengths to adhere to the RealWorld community style guides & best practices.
This codebase has about 1100 lines of source code that can be gziped to 18K.
- Authenticate users via JWT (login/signup pages + logout button)
- CRU* users (sign up & settings page - no deleting required)
- CRUD Articles
- CR*D Comments on articles (no updating required)
- GET and display paginated lists of articles
- Favorite articles
- Follow other users
- Modal confirmation for deleting articles and comments
This RealWorld example application is built using AppRun components that implements the model-view-update architecture.
import app, { Component } from 'apprun';
class ArticleComponent extends Component{
state = {}
view = (state) => <div></div>
update = {
'#/article': async(state, slug) => {}
}
}
Or use the on decorator
import app, { Component, on } from 'apprun';
class ArticleComponent extends Component{
state = {}
view = (state) => <div></div>
@on('#/article') root = async(state, slug) => {}
}
AppRun is a 3K library for developing applications using the elm style model-view-update architecture and event pub and sub pattern.
Applications built with AppRun have less line of code, smaller js file and better performance. See a comparision from A Real-World Comparison of Front-End Frameworks with Benchmarks.
AppRun has also joined the js-framework-benchmark project. You can see its performance results compared to other frameworks and libraries.
Following articles have more details of this application and AppRun.
- Visit the live demo
- clone this repo
- npm install
- npm start
- open http://localhost:8080 in browser
Pull requests are welcome.
MIT
Copyright (c) 2017 Yiyi Sun
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent