Announcing Aurelia 2 Examples

vNext
1

Hello, my favourite community,

You might have noticed that we have been busy over in Aurelia land. Firstly, if you haven’t checked out the docs in a while, you’re in for a real treat. Over the last few months, we’ve invested heavily into our docs to make them the best they can be. We want everyone of all skill levels to be able to rely on the docs to learn Aurelia 2.

While the docs are in a great place, I had a new initiative I wanted to propose. I proposed spending a few paid days creating some example applications for Aurelia 2. I am unsure if some of you are the same, but I prefer referencing code to reading documentation to learn new things (as ironic as that statement sounds). I like having code I can see and run. I learned to code from reading other people’s code.

So, after the team confirmed I wasn’t being crazy and it was a good idea, I set forth on a manic path to creating a repository of comprehensive examples for Aurelia 2. If you’re just wanting the link to the repo, it’s here.

You can also browse the examples visually here: https://aurelia2-examples-showcase.vercel.app/.

The overall goal of these examples is not to replace the docs but to compliment them. For some aspects of Aurelia, it seemed like a good idea to show you how to do things with code.

For some libraries like routing, validation and localisation it can be intimidating for some developers as they generally require a bit of configuration. All of these things are documented, but sometimes documentation can be a bit much if you just want a quick reference or answer.

Similarly, over time, this repo will serve as an FAQ of sorts, “How do I…?” a good example of this is the Shadow DOM example.

Oh, and if you thought it was just code, all of these examples are hosted. Links to each example are in the repository. You can see the code in action as well as run it yourself.

Please also know there might be some additional cleanup and last-minute changes. However, many of these examples are ready to be reference points. Please ensure that you read the main README as well as the individual README’s in each repo.

If you’re wanting to know how to implement routing, complete with authentication guards to prevent unauthorised access to parts of your app as well as other core routing concepts, I highly recommend the advanced routing example above.

And just for fun, I also created some apps which teach you basic concepts, some inspiration and can be used as the basis for your own applications.

And if you thought all of that was a lot, there is a lot more coming. If there are any concepts you want to see in the form of code example, please let us know. We want this to be an invaluable resource for the community and teaching tool for newcomers and experienced developers alike.

36 Likes
2

Wow that is awesome. Great work! Showcase websites that link you directly to code are awesome.

Yeah the shadowdom confuses me sometimes, like I kept trying to change Body tag background color and other silly attempts that were not possible. CSS is always a big deal for folks because not everyone is good at it.

Routing is definitely intimidating for many engineers—very happy with the “advanced” vs “simple” routing example. Engineers really need to look for a “correct standard way” vs a “do-able but hacky way” by inventing their own way.

Especially people often ask questions about SEO impact (although not impacted much anymore with advanced crawler tech from google) and backend/SSR loading content with http-fetches.

oh wow you got the Vue and Angular attributes, that makes switching frameworks easier! State persistence is very clean code that is readable and understandable. Excellent. No really great work on this.

3 Likes
3

Thank you, these are excellent.
Can this thread be pinned or made easier to be found by newer users?

3 Likes