Aurelia Advanced Topics

Webpack 4 bundling and PWA.

Problem with form builders is that they will always be pretty specific to the task at hand.

A generic form builder isnā€™t a plugin, thatā€™s a full-fledged product on its own. Larger businesses use products like SAP for that kind of thing.

I have seen some ā€œpluginsā€ from the Angular corner that try to do this. Theyā€™re not particularly popular and for good reasons. You still need to build a UI (with backend) to help generate the JSON that generates these forms, or the whole proposition rather beats its purpose.

That said, for those of us who want to try such an undertaking, it would be interesting to see some clean examples of using Binding Behaviors on how to do it. This is a very attractive problem domain for many businesses and entrepreneurs.

1 Like

Iā€™ve built a couple dynamic-ish form generators, and I canā€™t see a scenario where having a generic tool would have saved time. The forms needed have always been specific to the business at hand, and needed business rules, field types, and validation that were custom to that app.

The last one that I built was driven by the database. There are tables for forms, fields, formfields (m2m link), and lookups (for when a field calls for a dropdown, radio button, or checkbox list). There is no user facing designer, but it takes only a few minutes to add the appropriate rows to the database.

Iā€™d feel comfortable using this technique in another product, but I havenā€™t thought about how to make it work in a designer. The current version is in Knockout, so porting it would also be a project in itself.

Well as far as I remember @matt.duffield built a designer for forms as a product. Itā€™s even based on Aurelia. Just canā€™t remember the name of it anymore ā€¦

1 Like

Front End Creator. Am hoping to leverage a small portion of his knowledge without affecting his product :grin:

1 Like

In FrontEnd Creator, we use an Entity Builder to create your schema. This typically would represent your backend database table. During the creation of an Entity, you define form specific fields or even custom elements. Finally, in the designer part of the app, you simply drag-n-drop the entity by selecting whether it is view-only or editable. The nice part with this is that you can change an entity definition easily and drag-n-drop fairly quickly.

I agree that there is still some work to do in order to satisfy customer business rules, but this certainly does save a lot of time getting this scaffolded and started!

I am happy to do a chapter on something similar to FrontEnd Creator or any other scenario that comes to mind. FrontEnd Creator uses a custom JSON format but the chapter could use JSONSchema or something else for that matter.

1 Like

this certainly is an advanced topic and would make a great fit

Personally Iā€™d love to see some guides around performance optimization. The docs doesnā€™t really cover this topic, and when you get into complex layouts with multiple nested repeats the perf is starting to be a big issue. Still havenā€™t managed to find a good resource around this so any pointers would be very appreciated :slight_smile:

1 Like

Working with node.js, real world example of using a plugin (aurelia-validation) in both node.js and a regular Aurelia application

  • Internal structure of Aurelia and central principles
  • How to benefit from web components (esp. creating web components with Aurelia)

Can you go into a little more detail what you mean here about debugging and breakpoints? Are you asking how to debug and add breakpoints as you author a Monaco custom element?

1 Like

Hello @matt.duffield

With pleasure, As you know better than me Monaco is an awesome editor with intellisense and highlighter so suppose I want to write C# editor with it. I am not sure it is possible however we have breakpoints and debug mode in VS Code but in online mode, I donā€™t know but it would be great if the custom element helps us to create breakpoints and debugging codes in the online editor.

something like this for python:
Online Python Debugger

You can add breakpoints and debug the codes online simple but useful :slight_smile:

If this technique possible (Enable breakpoint/debug mode), you can add it to your awesome FrondEndDeveloper tool too, especially for typescript.

I know in Ace Editor they have some functionalities.
Add/remove breakpoints in Ace editor by clicking the gutter space
C9 Breakpoints

In summary, A custom element with
ā€“ Adding breakpoints
ā€“ Debugging mode and watch variables

Hi @HamedFathi, thanks so much for the response. That makes sense and it would be a nice addition. Will have to look into how VS Code and Ace Editor accomplish this for web applications.

Thanks again,

Matt

1 Like

I would love to read something about SEO knowing that this is a topic that can fill dedicated books. Maybe you can summarize ā€œbest practisesā€.

Hi everybody, here is an updated list of the topics/chapters I am hoping to include in the book. My initial thought would be each topic/chapter be a stand-alone example.

  • Server Side Rendering
  • Security using Oath like Auth0
  • FlexBox and/or CSS Grid
  • Electron and Aurelia
  • State Management (e.g. Aurelia Store)
  • CRUD Templates like the DataForm that was in Silverlight for Admin screens
  • Advanced Templating strategies - @processContent, InlineViewStrategy, etc.
  • Aurelia UX or any other official Aurelia plugin
  • Progressive Web Applications (PWA) and Aurelia
  • Examples using third party APIs like MailGun, mLab (MongoDB), Auth0, etc.
  • Guidelines for authoring Aurelia plugins, step by step
  • Realtime programming using Firebase
  • Advanced Routing - Nested/Child routing, lazy-loading routes, site-map created based on routes/nested routes
  • Aurelia Web Components
  • Using the Monaco Editor in Aurelia
  • Aurelia Core Architecture - how to extend, plug in your own stuff
  • RxJS and Aurelia
  • Advanced Binding Behavior scenarios, BindingEngine
  • Handling multi-rooted apps
  • Utilizing Web Workers for background processing
  • Understanding the QueueMicroTask and guides
  • Using GraphQL in Aurelia
  • Compare/contrast aurelia-fetch vs. vanilla vs. axis
  • Guide for calling Azure Functions and ensuring server-side errors are sent to the clien
  • Advanced Bundling with Webpack and PAL
  • Advanced scenarios with SystemJS - auto-generating the config by inspecting package.json
  • Performance optimization guides - especially for complex layouts with multiple repeat.for
  • Realworld deploying production ready apps - guide
  • Aurelia Validation - both client and server
  • Aurelia vNext
  • Aurela with Razor and .NET Core
  • Extending the Aurelia CLI with custom Tasks, etc.

I will be presenting this to my publisher soon.

4 Likes

You have Firebase, maybe Signalr too?

2 Likes

Especially now that it is being offered in Azure! I think that would be a cool addition.

If you head for aurelia-store might put the RxJS chapter right before it as its needed there as well.

1 Like

That sounds great! Will do that.

I think you can add SSR too. A combination between ASP.NET Core and Aurelia SSR would be great.

Aurela with Razor and .NET Core and Server Side Rendering