What tutorials do you want to see for Aurelia 2?

Hi Aurelians, to truly showcase the power and simplicity of Aurelia 2, what tutorials would you like to see? The documentation will have a tutorials section catering to a variety of different skill levels of developer, from a newcomer to a veteran looking for a fun challenge.

I think you will agree with me that to-do lists are a tad overdone now and not exciting. Some ideas that I am floating around include:

  • Cloning existing interfaces such as Netflix or Spotify. The aim would be to show you how to construct component-based UI’s, structure things, and perhaps even use some of the Shadow DOM functionality that is now natively supported in Aurelia 2.
  • How to convert a React, Svelte or Vue application over to Aurelia
  • Build a markdown editor
  • Build a multi-step form web application (possibly even using Aurelia Store)

Ultimately, I would love to know what people wish they had when starting with Aurelia or any other framework/library, for that matter.

10 Likes

Very grateful for this extremely important initiative. Thank you!!

I propose an app that illustrates reactive programming, such as live chat, or stock market ticker.

4 Likes

Highlighting reactive binding is definitely an important thing. It’s one of Aurelia strengths being able to bind to values and then using interpolation to watch them change in real time.

I think given the faster pace of cryptocurrencies, a crypto ticker of some kind could actually be a cool app to build. The ability to enter some cryptocurrency symbols and then see the price updating would actually be one of the easier tutorials too.

Live chat would make a great intermediary type tutorial as well.

Great suggestions, thank you.

4 Likes

Good to know this. Great initiative.

Some thing that showcases dynamic composition.

4 Likes

I recently heard about svelte and decided to check it out, and one of the things I really like about their docs it is their interactive tutorials. I think something similar with au2 could be a good way to win over potential adoptees.

2 Likes

More interactive code examples is definitely an idea on the list and planned. Right now, we are getting all of the textual based content done first. But there will be tutorials, interactive examples and even some video content planned as well.

Anyone who has tried Aurelia loves it, but I think the missing link is starting materials like this which ease developers in and before they know it, they are in love.

6 Likes

To do lists may be overdone… but what if it were expanded to more of a task scheduler, leverage Aurelia-store/IndexedDb to create a personal time manager sort of application.

Another option is maybe a combined rss reader? I’m trying to think of things that can use open server apis for content…

2 Likes

Hello everyone. First post here. Excited for the upcoming release(s).

Build a small app typescript app and keep adding features until it grows into a mid sized enterprise type app.

Some features on top of my mind, in no particular order:

  1. Usage of rxjs/store for managing performant views
  2. Authentication + Authorization (with Identity Server 4 etc)
  3. Integrating svg/d3 component(s)
  4. How to start with a UI component library (bootstrap, tailwind)
  5. Forms and complex forms (multi-step, auto save)
  6. PWA, service workers
  7. deep dive into DI, lifecycle and other framework concepts.
6 Likes

These are fantastic suggestions; thank you, Animesh. Welcome to the community. You’ve arrived at a perfect time. Also, worth pointing out that another tutorial has been published where you build a dashboard using Aurelia 2.

The plan is to have a wide variety of learning resources from integrations with other libraries through to advanced techniques and leveraging lesser-known APIs and features.

3 Likes

For Aurelia 1 I need a step by step tutorial to migrate to Aurelia 2.

  • Starting with Webpack configuration
  • Bootstrapping (index.ejs/main.ts)
  • Router-Configuration, Authotization steps
  • Plugin Integration (Value-converters, custom attributes)
  • Viewmodel Lifecycle

General tutorial:

  • How to integrate Webworkers and create Webpack bundle / entrypoint.
4 Likes

Provide advanced component building tutorials. For example, show how to wrap DevExtreme grid including such features as row templates which can be composed of aurelia components. Show how grid properties can be placed on Aurelia wrapper component without manually reimplementing them all. Do the same with grid events.

2 Likes

Show how your widget based dashboard can be enhanced to build a drag and drop grid of widgets. For example, NetroStation demonstrates how dashboard UX works well as a start page.

2 Likes

@mreiche

That is actually an excellent suggestion. Numerous Webpack applications are floating about written in Aurelia 1 (I have quite a few of them). So, plenty of source material for a migration tutorial. There are already some migration resources around, but none of them detail things like Webpack migration and so on, especially the router.

@vangundy

Great suggestions. Thank you.

I like the idea of using the dashboard tutorial as a starting point to expand it with drag and drop, perhaps even things like widget configuration (allow the user to configure how the data is displayed) and even expand the widgets out to show charting libraries and whatnot.

1 Like

Hi @dwaynecharrington,
Thanks for bringing this question up! Tutorials are very important indeed, as is a complete reference guide.
When the tutorials consist of working examples preferable in an embedded code editor / sandbox, that would be even greater!
To make a tutorial totally complete, a link to an accompanying github repo containing the result of the tutorial would be absolutely awesome!

3 Likes

Hi @dwaynecharrington,

My suggestion would be: a tutorial / github template demonstrating best practices of setting up AU2 in Dot Net Core (1 example with integrated WebApi and Web App UI, and with a separate WebApi backend).

4 Likes

Hi @dwaynecharrington,

And another suggestion would be non-platform specific: How to enable off line functionality, like views displaying a client-side db or cached store with previously requested data like data-lists and data-items. In other words: A progressive web application (PWA) built on AU2.

4 Likes

+1 for Migrating from Aurelia 1

Both because I need it myself and I think it’s important to fix the appearance that Aurelia 1 has been abandoned. One of the arguments for Aurelia over Angular was that continued development of Angular was at the whim of google and the green tea project (or whatever it was called), but Aurelia was made by pragmatic developers who used it in their own applications. If Aurelia 1->2 doesn’t have a smooth migration path, after several years of apparent sidetracking by the v2 effort, that argument will be made in the reverse direction.

I’ve just started poking at v2, but what I’m seeing so far is good :+1:

2 Likes

We hear you @tsoiland when it comes to Aurelia 2. Most of the things you love about Aurelia 1 are the same. The templating syntax is the same. More capabilities (like the promise controller) have been added, switch/case statements in views, portalling and other features that didn’t exist in v1.

The only thing that really comes to mind is the router. The router lifecycles are named differently. There is no configureRouter method anymore, and how you create lifecycles (pipeline steps) is so much nicer. Another difference is for plugins and how they are registered (but, easy to port from v1). For the most part, Aurelia 2 is more or less Aurelia 1++. Many of us on the core team have been building Aurelia 2 apps for well over a year now.

I have done a couple of migrations to Aurelia 2 now and largely the only thing I had to do was replace a whole bunch of PLATFORM.moduleName statements in my code which are a remnant of Aurelia 1 to support Webpack (not needed in v2). That’s probably the extent of the annoyance I’ve had. These migrations helped me provide real-time feedback to the other guys as the framework has been built.

@RedFeet Great suggestions. I like the idea of building an offline application, you don’t see a lot of tutorials focusing on robust offline applications, I would even find that helpful.

2 Likes

I think one thing to at least mention would be a comparison in how Aurelia works vs. React, Vue, etc. Why users would want to consider it over another framework.

Things I can think of:

  1. Portability - I mean viewmodels are just typescript so the logic is very easy to port from and to alternative projects. Views are almost plain html.
  2. Testing - because of 1, the simplicity of viewmodels, I feel like testing is much easier
  3. Performance? Aurelia doesn’t use a VDom, right? So there’s a big advantage.
5 Likes