https://github.com/ephect-io/framework
Effective PHP
https://github.com/ephect-io/framework
functional-components php
Last synced: about 2 months ago
JSON representation
Effective PHP
- Host: GitHub
- URL: https://github.com/ephect-io/framework
- Owner: ephect-io
- License: gpl-3.0
- Created: 2021-11-23T08:22:15.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-12-17T16:12:18.000Z (4 months ago)
- Last Synced: 2025-12-21T04:29:16.638Z (4 months ago)
- Topics: functional-components, php
- Language: PHP
- Homepage:
- Size: 2.43 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## What is Ephect ?
**E**ffective **P**rogramming in **H**ybrid **E**nvironment using **C**omponents-based **T**emplates.
It's a comprehensive solution that combines a lightweight PHP framework and a JavaScript library.
Ephect allows you to design backend pages and components a fluent way as well as web components.
It integrates a build process based on webpack.
## Featured concepts
### The components
Basically, components are custom HTML tags. All concepts of HTML tags on backend side are applicable to components except the naming convention: a component name must begin with a capital letter.
The logic of the component is coded in a simple funcion returning a template.
#### Example 1
Here is an open component that can surround children components or just HTML code.
```html
Hello World!
```
The code would look like this:
```php
My component
{{ children }}
HTML);
}
```
It will render:
```html
My component
Hello World!
```
#### Example 2
A closed component to which we pass arguments:
```html
```
The code would look like this:
```php
{{ props->with }}
HTML);
}
```
It will render:
```html
Some argument
```
### Cascading and reusing components
The components can be declared in cascade and the same component can be reused in each cascading component.
If we combine examples 1 and 2:
```html
```
It will render:
```html
My component
Some argument
```
## The component Slot
A parent component with named placeholders can be inherited to change the content of its placeholders. The component in charge of managing placeholders is called *Slot*.
Here is a Mother component containing slots to be overriden:
```php
Mother!
{{ children }}
HTML);
}
```
And here is a component inheriting from Mother component:
```php
Ephect in action !
Welcome Home!
HTML);
}
```
It will render:
```html
Ephect in action !
Welcome Home!
```
### Hooks
**Ephect** introduces *hooks* to manage the data workflow. Additionally to well-known useEffect and useState hooks in the **ReactJS** realm, **Ephect** comes with 3 new basic hooks:
- useState: to store data in a file and get it back as is,
- useStore: to store data in a file and get it back as object,
- useMemory: to store data in a memory registry and get it back as is,
- useQueryArgument: to filter the value passed as parameter to the query,
## CLI tool *use*
**Ephect** comes with a CLI tool called *use* which provide you with a bunch of practical `make` commands. You can see the full list of commands by typing `php use help`. The primary role of **use** is to build the code of the whole application at once. This is done in one command: `php use build`. The benefits of this approach are the errors management and the increase of velocity of the application.
### Error handling
Every syntax error is handled as a fatal error which stops the compilation process. An explicit message is displayed on the console output to help you fix it quickly.
### Headless page generator
The compiler parses the templates of every component owned by a page comprising the cascading components. Each component is translated from **Ephect** template code to pure functional **PHP** code and cached. The code of each component is light and fast to run.
Once the pages are prepared in cache, browsing them is as fast as possible. The only bottleneck that you should be aware of is the data resources calls.
## Requirements
Since Ephect is an hybrid environment, you need both PHP and NodeJS installed.
It's highly recommended to use the last versions.
Ephect is compatible with PHP 8.3 and Node.js LTS 20.x.x.
You may also need to install some PHP extensions, if it's not done yes, like PDO/Sqlite, cUrl, Iconv, etc.
## Install the framework
It's recommended to use the composer create-project command in order to get all the needed stuff.
There's a dedicated project you can find here **[ephect-io/create-app](https://github.com/ephect-io/create-app)** that will help you for a quick start.
Just do:
composer create-project ephect-io/create-app myproject
where *myproject* is the name of your project.
## Install the sample application
Move to *myproject* directory and type:
php use make:quickstart
You will see a **app** directory in which you will find the standard structure of an Ephect application and a **public** directory in which is stored the index.php.
## Build the application
First, install all needed modules.
```bash
npm install
```
To run the application without setting up a web server, you need to serve the application in a separate terminal.
Open another terminal, move to your project directory and type:
```bash
php use serve
```
Come back to the first terminal and type
```bash
npm run dev
```
If you installed the QuickStart application as said previously, you should see something like this:
```bash
> create-app@0.7.0 dev
> run-script-os
> create-app@0.7.0 dev:darwin:linux
> bash scripts/unix/dev.sh all
scripts/unix/dev.sh: line 13: warning: here-document at line 11 delimited by end-of-file (wanted `LIST')
Running webpack...
asset app.min.js 2.32 KiB [emitted] (name: main)
runtime modules 274 bytes 1 module
./app/JavaScripts/index.js 212 bytes [built] [code generated]
webpack 5.91.0 compiled successfully in 306 ms
Publishing assets...
'app/Assets/bootstrap.php' -> 'public/bootstrap.php'
'app/Assets/css/setup.css' -> 'public/css/setup.css'
'app/Assets/css/index.css' -> 'public/css/index.css'
'app/Assets/css/app.css' -> 'public/css/app.css'
'app/Assets/favicon.ico' -> 'public/favicon.ico'
'app/Assets/img/salamandra.png' -> 'public/img/salamandra.png'
'app/Assets/index.php' -> 'public/index.php'
'app/Assets/web.config' -> 'public/web.config'
Sharing modules...
'node_modules/human-writes/dist/web/human-writes.min.js' -> 'public/modules/human-writes.min.js'
Building the app...
Compiling App ... 037ms
Compiling Home, querying http://localhost:8000/ ... 065ms
Compiling Hello, querying http://localhost:8000/hello/1/2 ... 013ms
Compiling World, querying http://localhost:8000/world ... 011ms
Compiling Matriochka0, querying http://localhost:8000/matriochka/1 ... 052ms
Compiling Info, querying http://localhost:8000/info ... 007ms
Compiling Callback, querying http://localhost:8000/callback ... 037ms
```
## The sample pages
The available page routes are:
A simple page with 2 children components; the first passes values to the second with useState hook.
- http://localhost:8000/
A sample to show how to manage parameters passed in the URL path.
- http://localhost:8000/hello/arg1/arg2
A sample to show how to manage parameters passed in the query string with a parent component for the style.
- http://localhost:8000/world?name=arg1&lname=arg2
A sample to show how to use the same component in cascade.
- http://localhost:8000/matriochka/arg1
A sample to show PHP info
- http://localhost:8000/info
A sample to show how to make a JavaScript callback with a PHP JSON response.
- http://localhost:8000/callback
## To be continued...