Aurelia RealWorld App

Posted by Moritz Hilberg on April 4, 2018

Thanks to the fantastic work of Moritz Hilberg and other community members, Aurelia is now available as part of the RealWorld project . Here's Moritz to tell you more about it...

What Is RealWorld?

gothinkster/realworld is a great place to learn new frameworks in the context of a more real-world scenario. It's also good if you want to learn best practices.

The introduction to the realworld project on medium states:

RealWorld shows you how the exact same real world blogging platform is built using React/Angular/& more on top of Node/Django/& more. Yes, you can mix and match them, because they all adhere to the same API spec.

Functionality Overview

The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication.

General Functionality

  • Authenticate users via JWT (login/signup pages + logout button on settings page)
  • 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

General Page Breakdown

  • Home page (URL: /#/ )
    • List of tags
    • List of articles pulled from either Feed, Global, or by Tag
    • Pagination for list of articles
  • Sign in/Sign up pages (URL: /#/login, /#/register )
    • Uses JWT (store the token in localStorage)
    • Authentication can be easily switched to session/cookie based
  • Settings page (URL: /#/settings )
  • Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
  • Article page (URL: /#/article/article-slug-here )
    • Delete article button (only shown to article's author)
    • Render markdown from server client side
    • Comments section at bottom of page
    • Delete comment button (only shown to comment's author)
  • Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
    • Show basic user info
    • List of articles populated from author's created articles or author's favorited articles

As you can see, the app covers many basic and advanced topics like Routing, Fetch-API and Authentication.

Why Should You Be Interested?

If you want to get involved with Aurelia, this project could provide a good starting point for you, whether you're just using Aurelia or if you want to contribute. As Jonathan Eckman has described in his blog post , it is a goal worth achieving. As mentioned before, this project can also be a good place to discuss and showcase best practices. So far, the code has received quite a bit of review. Finally, this is a good sample if you want to compare different frameworks. Maybe your boss needs a decision on which framework to use, or you just want to learn something new.

Conclusion

I want to thank all who participated in and supported this project: the RealWorld core-team, the Aurelia core-team, my team at aurelia-realworld-example-app and the Aurelia community. I can say that the Aurelia community is alive and very supportive!!! If you would love to join in the community in support of this effort, we're considering writing a full tutorial for the Aurelia RealWorld app. Please star and reach out to us at aurelia-realworld-example-app .