Hamtaro framework
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
andAbstractPage
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.
{
"scripts": {
"ajax": "Hamtaro\\Command\\CreateAjaxRequest::run",
"component": "Hamtaro\\Command\\CreateComponent::run",
"form": "Hamtaro\\Command\\CreateForm::run",
"modal": "Hamtaro\\Command\\CreateModal::run",
"page": "Hamtaro\\Command\\CreatePage::run",
"event": "Hamtaro\\Command\\CreateEvent::run"
}
}
For example, composer run form Login
create your form component to src/Controller/Form/Login.
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