Hamtaro framework

• About
• Technologies
• Controllers
• Components
• Commands
• Front-end development
• Getting Started

About

Hamtaro is the new web framework for front-end / back-end development using Php and Javascript.
Create your modern and stable web application in a strict, simplified and organized environment.

Do yourself a favor : use Hamtaro 🐹

Technologies

Php | Javascript | Composer | Npm | Node.js | Webpack | Babel | Sass | Twig | Bootstrap | jQuery | Json

Controllers

Ctrl means controller identifier inside your Hamtaro application, it helps to identify the namespace and the filepath of your controller.

• AbstractAjaxRequest is extended by your ajax requests.
• AbstractForm is extended by your forms.
• AbstractModal is extended by your modals.
• AbstractPage is extended by your pages.

All controllers allowed to be loaded must be defined in src/main.php with the controllers property.

Components

Component means graphic item inside your Hamtaro application.

AbstractForm, AbstractModal and AbstractPage extending AbstractComponent, create your own component type doing the same.

A component is composed of 4 files and identified with its Ctrl.

• Ctrl.js - Front-end configuration extending AbstractForm, AbstractModal, AbstractPage or AbstractComponent.

• Ctrl.php - Back-end configuration extending AbstractForm, AbstractModal, AbstractPage or AbstractComponent.

• Ctrl.sass - Component's stylesheet

• Ctrl.twig - Component's view. Pug support is coming.

Hamtaro identifies your components in the DOM with these types of selectors :

• .hamtaro-component[data-ctrl="Header"]
• .hamtaro-form[data-ctrl="Identification/Reset"]
• .hamtaro-modal[data-ctrl="Newsletter"]
• .hamtaro-page[data-ctrl="About"]

Commands

Using composer scripts, improve your workflow and save considerable time during development.

• CreateAjaxRequest to create a new ajax request.
• CreateComponent to create a new component.
• CreateForm to create a new form.
• CreateModal to create a new modal.
• CreatePage to create a new page.
• CreateEvent to create a new javascript event.

Front-end development

Use hamtaro.js for your front-end development.

The default webpack configuration supporting the following assets : .js|.sass|.scss|.css

• npm run assets Build your assets public/main.min.js and public/main.min.css.

• npm run assets:dev Your assets are monitored and built dynamically, just write bars and reload your browser to see the changes.

Getting started

Your work environment is already ready.

composer create-project cejobelo/hamtaro-starter my_project && cd my_project && composer install && npm install

Enjoy 🐹