Welcome Guest, Not a member yet? Register   Sign In
CI3-Cinder: 0.9 beta released.
#1

(This post was last modified: 07-04-2016, 11:36 AM by spjonez.)

CI3-Cinder: https://github.com/monsterlane/codeigniter3-cinder

This project is designed to provide a single page app like experience for websites, wep apps, or web based mobile apps. By adding the class "cinder" on an anchor link or form, the request will be sent over AJAX and injected into the page. Any required assets (JS/CSS) will be loaded asynchronously. Yes, that means we're changing controllers and methods without the browser performing a page change! After the initial page load, your visitors will never see a full page change again.

If you're familiar with pjax, Cinder is my own version of an asynchronous loading system built around CodeIgniter 3.

0.9 beta features include:
- HMVC folder structure: js, css, images, views, and controller are stored in a self contained folder
- Asynchronous loading of JS/CSS modules
- Automatic binding of a.href links and forms by adding class="cinder"
- History and bookmark support using HTML5 history API
- Server side data store using dot notation
- Client side data store using dot notation
- Robust conduit wrapper that supports get/post/jsonp and file transfers over AJAX
- Automatic client side view templating with caching in local storage
- Automatic view cache invalidation
- Automatic error detection
- Automatic redirect to maintenance page when server side flag is set
- Automatic CSS prefixing based on browser requirements using grunt-autoprefixer
- Optional database logging of PHP, MySQL, 404, and JavaScript errors
- Includes latest 3.x branch of jQuery
- Includes latest 3.x branch of CodeIgniter
- Includes jQuery plugins file to easily shim additional plugins
- Support for CI's form validation library
- Support for CI's CSRF protection (enabled by default)
- Support for flash data
- Support for hard/soft redirects
- Support for http/https swtiching
- Static asset versioning
- Only minified assets are publicly served (app resides in private folder)
- Additional array helpers
- Additional download helper
- Additional upload helper
- HTML minification through an output hook
- Image minification using grunt-imagemin
- Sprite sheet creation from a folder of images using grunt-spritesmith
- Config setting for default email/name in email library
- Drag & drop upload class using HTML5 file reader API
- Google Webfont support (global and per view)
- High precision timer class using requestAnimationFrame and performance.now
- Custom MY_Model with schema exploring for defaults and validation
- Updated migration system, files are stored in version folders
- AWS S3 container library
- AWS Elastic Beanstalk deploy through Grunt
- Webfont builder from a folder of SVG icons


Recent changes:
- Swapped templating library from dot.js to Dust.js
- AWS S3 library
- AWS deploy through Grunt
- Vastly improved build script, no changes are required when adding new controllers
- a lot of bugfixes


We've started porting a large scale production app into this library. Version 1.0 will be released in ~3m once the transition is complete. Cinder is considered feature frozen and only bugfixes will be applied between now and the first non-beta release.


---

The primary goal of this project is to abstract asynchronous loading away from the developer, while providing methods to access that functionality as needed. Abstracting JavaScript or AJAX away from the developer is not a design goal. You will be required to have a decent working knowledge of JS modules and inheritance to build sites using this package.

How it works:

When a request is made, if a post variable named "system" does not exist or is not set to false, CI will load a view very similarly to how it does now. This gives you the initial page content and boots the requested module. Subsequent requests pass system=false, all system logic is skipped and only partials are returned from the server. After the initial page load, the server *only* responds with JSON.

Each time a request is made through the conduit system (wrapper to jQuery $.ajax) an array of previously returned view file names + hashes is sent to the server. If the requested view matches any hash in the array the file is not loaded by the server and only the data is returned. If a match is not found or the view is out of date the file is read and sent back to the client uncompiled. The view is then cached in local storage and compiled client side using Dust.js and any invalidated versions are removed.

Once a visitor has viewed a page only the raw JSON data required for that page is returned. This makes subsequent requests extremely fast and use very little bandwidth as all templating is done client side using cached view snippets. Static asset caching is handled by using a version config option and a rewrite rule. The version value is processed and appended to all JS/CSS file requests allowing you to set a very long cache expiration header (month to a year). Each time you deploy an update this value is incremented and all of the clients cache is invalidated as the base path to your public files changes.

---

Some places of interest in the code;

/private/application/core
All the core server side code.

- MY_Controller: system load, data store, main view method, redirects
- MY_Loader: new view methods
- MY_Log: new logging methods
- MY_Model: base model with schema exploring
- MY_Output: HTML minification
- MY_Router: HMVC modifications

/private/application/controllers/main
Default module, basic templating and an example of automatic link hookups. Basic event binding from module constructor.

/private/application/controllers/dragdrop
An example of how to use the drag/drop upload class. If you get a path not found error check the controller (Git doesn't include empty folders).

/private/application/controllers/error
Custom error handler that's called for 404's and to log JavaScript errors if verbose is set to false.

/private/application/controllers/search
An example of a search form, with results injected inline and a JS callback to bind events to the newly injected data. Includes server side form validation example, and a random success/fail for deleting search results.

/private/application/controllers/maintenance
Maintenance module, fallback to system module with custom view/CSS.

/private/application/controllers/system/js
All the core client side code.

- app: main wrapper for loading modules
- cache: local storage wrapper
- conduit: jQuery AJAX wrapper
- model: client side data store
- module: base module
- timer: high precision timer class
- upload: drag/drop upload class
- view: template parser wrapper

/public/files/cache
The folder your minified assets are served from.

/Gruntfile.js
Grunt tasks and examples of how to add modules for optimization with r.js when using "grunt deploy" for testing and production environments. The standard "grunt" command lints your code and copies images to your public folder. JS/CSS files are copied automatically each request while set to the development environment. Your environment is set in your /public/.htaccess file (see example).

---

Feedback and constructive criticism is welcome!
Reply
#2

(This post was last modified: 02-15-2015, 11:12 PM by spjonez.)

Version 0.2 beta released!
Reply
#3

Version 0.4 released!
Reply
#4

Version 0.5 released!
Reply
#5

Version 0.6 released!
Reply
#6

Version 0.7 released!
Reply
#7

Although I read the instructions I have no idea how to install nor what npm is.

Can you assist?
Reply
#8

(This post was last modified: 05-19-2015, 07:26 AM by spjonez.)

Install Node (comes with NPM): https://nodejs.org/download/
Install Grunt CLI: http://gruntjs.com/getting-started

Once both of those are installed with the global option, from the command line run these commands while inside the root project folder:
npm install
grunt (should lint code to confirm its working)
grunt dev (only required when adding images or during initial install)

CSS/JS is copied per request while CI_ENV is set to development. If you add images you need to "grunt dev" to copy them to your public folder. In production/staging "grunt deploy" these are copied and optimized as part of the build process.

You don't need NPM or Grunt to set the project up, but it will be missing images (glyphicons) from Bootstrap if you don't.

Once both of those are done the site should load the login page. Enter anything for credentials, the fields are validated for input only and do not check a DB. The code is lacking a lot of comments at the moment, but the main view method auto-detects a lot of things for you. If the method is called "index" it will assume the view is "controller/name/views/index.html", otherwise it will assume method "myroute" is "controller/name/views/myroute.html". Same goes with CSS and JS, defaults for "index" are "style.css" and "module.js".

Check "config/app.php" for container defaults. Creating injectable views is as easy as;

Code:
<?php if ( !defined( 'BASEPATH' ) ) exit( 'No direct script access allowed' );

class Dashboard_controller extends MY_Controller {
    public function index( ) {
        $this->load->partial( array(
            'title' => 'Dashboard', // page title
            'view' => array( // if this key is set auto-detect controllers/dashboard/views/method.html
                'data' => array( // variables in the view template
                    'title' => 'Dashboard',
                    'body' => 'Welcome to Cinder.',
                ),
            ),
        ) );
    }
}

?>
Reply
#9

Version 0.9 released!
Reply
#10

How does your version compare with AmpProject.org which no doubt because it is backed by Google accounts for a drastic improvement in my mobile page exposure and subsequent ranking?
Reply




Theme © iAndrew 2016 - Forum software by © MyBB