Front End Development

FED

C6 is not dependent on a theme or frontend system; the documentation ships with a Material UI and Bootstrap opensource templates to demonstrate the robust use-cases C6 can handle. Generally, I recommend using React for all projects. It is NOT required and can be used in conjunction with other frameworks or just straight PHP!

CarbonPHP Examples

Check out this repo RichardTMiles/CarbonPHPExamples for a multiple complete examples of how to use CarbonPHP with only PHP.

REACT

Fast User Experience, Cost Effective, Mobile Friendly

After building a React project your build folder will contain a asset-manifest.json file. This file contains the assists required to load your application. This example below is redacted for brevity, but the full source can be found here.

{
  "files": {
    "main.css": "https://carbonorm.dev/static/css/main.7c83769a.css",
    "main.js": "https://carbonorm.dev/static/js/main.cb074f10.js",
    "index.html": "https://carbonorm.dev/index.html"
  },
  "entrypoints": [
    "main.css",
    "static/css/main.7c83769a.css",
    "static/js/main.cb074f10.js"
  ]
}

You can use the following code to load the CarbonORM.dev in any project. This is also how our WordPress plugin loads this documentation in an Admin Plugin page. This inner page is a React application running in a div not an iFrame. The React is loaded on the users browser while the rest of the page is generated by PHP serverside.

<div id="root" style="height: 100%;">
</div>
<script>
    fetch('https://carbonorm.dev/asset-manifest.json')
        .then(response => response.json())
        .then(data => {

            const entryPoints = data?.entrypoints || [];

            entryPoints.forEach(value => {
                if (value.endsWith('.js')) {
                    // Load JavaScript files dynamically
                    const script = document.createElement('script');
                    script.src = manifestURI + value;
                    document.head.appendChild(script);
                } else {
                    // Load stylesheets dynamically
                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.type = 'text/css';
                    link.href = manifestURI + value;
                    document.head.appendChild(link);
                }
            });

        });
</script>

For large organizations and teams, this process can be repeated multiple times for a single application view. Consider a separate react application for a search, sidebar navigation, and/or content display. This allows Enterprise applications with multiple teams of developers to build in separate repositories with no real dependencies on each other. These repositories can then be deployed independently of each other adding agility to your teams.

Material Design

Special thanks to Creative Tim and all the ladies and gents contributing to the open source Material Kit and Material Dashboard. My work here is to further the love.

Creative Tim's Material series implementation Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design. It is based on the popular Bootstrap 4 framework and comes packed with multiple third-party plugins. All components are built to fit perfectly with each other, while aligning to the material concepts.

CarbonPHP expands on Tim's UI by adding the first major login context switch, global sweet alert system, a global axios implementation, and routing chains for easy property scoping.

REACT features a live development server that compiles and refreshes the browser realtime with edits made to the code. I'm my honest opinion, it is a very pleasing development experience that leads to faster overall development process.

AdminLTE

Special thanks to Abdullah Almsaeed and all the ladies and gents working on AdminLTE.

AdminLTE is a popular open source WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3. It utilizes all of the Bootstrap components in its design and re-styles many other commonly used plugins to create a consistent design that can be used as a user interface for backend applications. AdminLTE is based on a modular design, which allows it to be easily customized and built upon.

C6 expands on the AdminLTE UI by implementing Defunkt's jQuery-PJAX, a global alert system, and the Mustache template engine in php and Javascript. CarbonPHP also has Cli support for JS and CSS minification.

AdminLTE is a full scale template system that can handle the UI for most applications needs.