Currently, I am in the process of finalizing the initial release of a large-scale website built using PHP (Phalcon), MySQL, and JQuery. The technology stack may be a bit outdated, but it was originally prototyped years ago and due to various circumstances, it has taken quite some time to reach the production stage.
Although hard page reloads are not the latest trend, they do have their place in a complex application like this, especially when transitioning to different sections serving unique purposes. The website currently mimics a single page app with hashed URLs and ajax content loading, particularly where SEO is not a concern. However, the reliance on JQuery for these functionalities has resulted in a messy and challenging codebase. Additionally, features like notifications in the navigation bar are updated via ajax on every page.
While PHP is my area of expertise, I lack proficiency in JavaScript. It has become apparent that JQuery alone is insufficient for the website's needs. I am in need of a JavaScript framework that can manage templating, local routing, http requests, and follow an MV..? structure for better organization and maintainability. After exploring options like Angular 1 and Angular 2, I came across Aurelia alpha, which seemed promising with its modern syntax and design. With more resources and documentation available for Aurelia 1 beta, I am inclined to adopt it for this project.
Despite my understanding of Aurelia's capabilities, I am struggling with integrating it into the current project setup.
Integration
- Each section of the site will require distinct Aurelia apps.
- Multiple Aurelia apps may be necessary per page.
- Some Aurelia apps will be utilized across all pages.
I came across an article by Patrick Walters detailing how to incorporate Aurelia apps on different parts of the site by specifying the app name when calling it on the element;
<body aurelia-app="main" start="app">Following this, setting up a shared main.js file like;
aurelia.start().then(a => {
let start = a.host.attributes.start.value;
a.setRoot(start);
});
While this approach seemed logical, I encountered issues when placing the call in a div instead of the body, resulting in an unresolved 'host' error. It seems that 'host' should be replaced with the element itself, but the exact method eludes me.
Any insights on integrating Aurelia in this manner would be greatly appreciated.
While I have come across similar solutions on SO, many of them involve duplicating 'main.js' instead of reusing it, which does not seem ideal.
Structure
In an attempt to create a more organized directory structure, I experimented with moving source files to subdirectories. However, the only way I could make this work was by adding a named path to each in the configuration, such as
"welcome*": "dist/welcome/welcome*",