Welcome Guest, Not a member yet? Register   Sign In
Single page site/app
#1

[eluser]jonez[/eluser]
I've had an idea for a while now that I've wanted to build with CI3. I plan on starting on this soon (it will be hosted on GitHub and available under MIT), if you're interested in contributing reply and I'll add you.

As a web developer the holy grail of web/app development has always been responsive UX. To facilitate a true native experience on the web load times must be minimal and their progress informative. Page changes have always been the limiting factor between web and native apps. AJAX assists with this by allowing us to return (un)compiled partials from the server and inject them into a page. We all use this once a page has loaded, but very few of us are using this to change pages. I want to build a system that changes controllers and methods without changing pages. All CSS/JS is loaded asynchronously and the body (or specific) container is rewritten. Once your index page has loaded the user will never see an actual page change again. Every link or form request will be sent over AJAX.

This is perfectly possible using CI3. In fact due to how quickly CI handles requests it's actually a better framework than most for this type of task. The app I currently work on returns every AJAX request in ~50ms. It doesn't do full page changes through AJAX, but users routinely spend 3-4h in the main module without seeing a page change.

Here's what I purpose;

- Initial page load renders the main index content
- Every link is actually an AJAX call
- Any server request (including page changes) return a JSON object: an uncompiled view, view data, required resources (CSS/JS)
- Resources are tagged with a data attribute. During a page change the previous assets are deleted and the new assets are loaded using a promise. Once complete the uncompiled view file is cached and a compiled version is generated and injected into the specified container.
- Templating is all done client side. Once an uncompiled view file is cached the server can be sent a flag to only return the data portion. This prevents file lookups on the server and since only raw data is sent it significantly reduces the file size of requests.

For this to work several design decisions must be made;

- HVMC folder structure, assets are stored with the controller in subfolders
- Heavy use of client side tools (requireJS). Module based inheritance pattern, conduits for AJAX calls, basically and API for your modules to use once a page has loaded
- Links can be created with data attributes for meta data, forms can be serialized. The majority of links/forms can be bound automatically
- Based on the environment assets can be copied (dev) or merged/minified (prod) to /files and served from a public folder

Yes I'm half building Ember using CI. I'm fully aware of that, there are use cases that Node/noSQL aren't great at (heavy relational data) and I think it would be a fun project to work on.

Comments and criticisms are welcome. Thanks!
#2

[eluser]ivantcholakov[/eluser]
1. Will be an administration panel included? Using the same technology or the trivial way?
2. Will the application (and the administration panel) support multiple languages? Multilanguage CRUD?




Theme © iAndrew 2016 - Forum software by © MyBB