I'm pretty excited to announce this new open-source project!
I've been maintaining RealWorld project for 3 years and decided to create a spin-off to focus on Angular.
Once upon a time... RealWorld
RealWorld is an open-source project created by Albert Pai and Eric Simons back in 2016.
You can find their announcement here.
In a nutshell, it aims to provide examples apps built with different frameworks but still adhering to the same API spec.
If you know TodoMVC, RealWorld is quite about the same philosophy but with more complete examples.
At the time of writing, RealWorld is close to 80k GitHub Stars and includes 204 example apps listed here.
What is RealWorld Angular compared to RealWorld
This new project is a spin-off focusing on Angular.
As RealWorld is about comparing frameworks with a limited list of example apps for each of them (for maintainability reasons), this new project aims to do quite about the same but by showcasing Angular libraries.
Why a spin-off
As an Angular Discord server moderator, questions about recommended example apps are quite common.
But in most situations, examples are limited StackBlitz projects or small demos by Angular library maintainers.
The goal is both to provide a more Real world situation to showcase technical aspects or library integration in an Angular project and to build a great playground with example apps you can test, customize, or update.
Angular app template
RealWorld Angular will provide a demo application and API spec.
But it'll be a new more complete application to open opportunities to enhance it with examples apps:
- what about adding i18n?
- what about using a state management library?
- what about choosing template-driven forms over Reactive Forms?
- what about using SSR over CSR?
- and so on...
Unlike RealWorld requiring most example apps to start from scratch with a new framework, a GitHub starter template will be provided to focus on details.
RealWorld provided a blogging platform as a demo. RealWorld Angular will provide an event platform demo, with way more situations to showcase Angular features and modern best practices used in web applications.
Where is the template?
This project is built in public and this template is still WIP: the first current step is the creation of the API, built with Nitro.
Community
By focusing on a framework and providing an app template, it'll be easier with this project to engage with the community and create open-source contribution opportunities.
Based on the template, Examples apps will be created on-demand in the GitHub organization, providing Maintainer role to anyone willing to help by contributing to a new example app: Trust by design!
Discover a more complete introduction to RealWorld Angular on the GitHub organization.
Top comments (20)
This is so cool ! Specially the whole State-management part, that a real important point for a lot of new and even older Angular dev's, specially with all the recent changes with Signals !! Can't wait to play around with it !!
Indeed, one of the wise part about state management solutions is to know when not to use it for example, avoiding relying on a global state for a local one. Having real-world situations will help to understand it.
I can empathize, entirely! I recently landed from this learning curve 😅🥰
Both TodoMVC and Real world are good showcases for proving your skills but also excellent examples when you, like myself, build your own framework. Pretty curious how you'll implement it and the actual size of the final implementation.
For RealWorld we have a blog platform as a demo. For this project, it'll be an event platform, like Meetup or EventBrite. The goal is to be way bigger to illustrate way more real-world situations you need to solve, like advanced authorization, dynamic forms, cross-field validation, drag and drop, dialog, local state vs global state.
There are a lot of potential features you can create around managing a community. It means the project will be way bigger than RealWorld. But as you do not start from scratch as the demo will be the starter template too, it'll help to maintain and get more example quickly.
And with a focus on a framework, the purpose of the example apps will be different. The goal is to showcase how to go further from a 'vanilla' Angular app. It might be about changing internals like using a state management library but it could be adding something, like i18n, UI framework, SSR, and so on...
Only Angular? You will not accept a React solution from community (and me)?
Indeed the focus is on Angular. From the experience of maintaining RealWorld, it's impossible to promote good practices about a framework you have not mastered, that's RealWorld limitation. By creating a dedicated project for Angular, I'll be able to do so for the community.
I'll encourage and support anyone wanting to do the same for another framework! You can create a RealWorld React project!
I mean if the features of this new "RealWorld Angular" is complex and challenging enough, I would like to recreate all those features but in React. It would have weird name, but I hope it will have a place in your list of solutions
The project is open source so you will be able to use it to reproduce it for React but it's still 'RealWorld Angula' so this project won't obviously list React projects.
Very interesting, keep going!
I really hope you can provide more complex situations here. The original RealWorld blog is just too simple, can't really draw any conclusion out of it
Yes indeed, here is a new description about features: realworldangular.org/news/2024-07-...
Sounds cool!
Looks cool. You mentioned an Angular discord? Could you post a link please? Thanks in advance.
here it is: discord.com/invite/angular
Nice! This comes handy to dive again into Angular after many years away from it.
Awesome. The documentation moved on a new website, angular.dev by the way
Great, Wanna see
zonless
signals
Query signals
Difer
in the real world app💯♥️
Awesome, can't wait to see what it will become 🙌
Hi Gérôme Grignon,
Top, very nice and helpful !
Thanks for sharing.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.