Agile UI

Normally you must know and write HTML/JavaScript/CSS/SQL to build a web app.

Agile UI allows users to build web apps with little to no knowledge of web technologies. This is because they will be using Object-Oriented features of PHP language to create their web page structure out of re-usable, interractive components.

The next screenshot demonstrates a type of interface that could be created in 5 minutes with only 50 lines of PHP code (including that Form submission and validation):

image

Links: Demo; Source

Why have we created Agile UI?

The motivation behind creating Agile UI is in improving efficiency and reducing the time to it takes to build Web Application interfaces that are built using CSS frameworks such as Semantic UI or Bootstrap CSS.

Current approaches require multiple developers to work on the front and backend of the app. But with Agile UI, even the most complex apps can be put together from building blocks.

  • Agile UI is a PHP framework, not a tool. It won't generate code for you, you will have to write it.
  • Agile UI is great for students who learn how to program Web Apps with minimum effort.
  • Agile UI is great for businesses who want to build their admin, back-office or ERP system themselves.
  • Agile UI is invaluable to help you refactor that legacy PHP project.
  • for freelancers and web agencies, Agile UI will help you to create re-usable components with ease.

(NOTE: If you use AngularJS or similar in your project, look into Agile Data, instead).

Getting Started with Agile UI

If you are new to Agile UI, start with this 20-minute introduction. Discover and bookmark location for:

If you are having trouble getting started, you are welcome to use our forum and Gitter chat:

What problems does Agile UI solve?

Conventional web development and use of Fullstack PHP frameworks require developers to perform number of different actions when they seek to extend their web application with new features. Some examples: create views, create controllers, create routes, create JavaScript code and write CSS code.

Agile UI approaches this hurdle differently. It separates "business logic" from "components". The presentation layer will simply specify which business model to use with which component. When asked to add a new feature, the developer can look at existing components and when they find one that fits, they can seamlessly integrate it with few lines of code:

$grid = new \atk4\ui\Grid();
$data = new Order($db);
$data->addCondition('is_new', true);
$data->addCondition('client_id', $_GET['client_id']);
$grid->setModel($data);

$html = $grid->render();
// or: $app->layout->add($grid);

Aglie UI component "Grid" will automatically take care of:

  • Exploring fields of your data model and creating Columns.
  • Formatting types properly, numeric, monetary, dates, etc.
  • Retrieve data from your SQL / NoSQL / API backend.
  • Fast HTML rendering optimised for large data volumes.
  • Provide AJAX support and client-side event bindings.
  • Support for custom HTML templates and custom JS libraries.

Unlike many other CRUD/Grid solution, Agile UI relies on "Domain Model" and not "SQL-table". This is a great enterprise feature because Domain Model will implement some of the following features transparently:

  • Mapping domain models to 2 or more actual tables or even across multiple persistences
  • Using SQL expression for fields (e.g. "total" column in your grid will be a formula)
  • ACL features controlling data/field access by Component / User / Privilege
  • Jail support for automatically limiting row access based on currently authenticated user/system.
  • Event Sourcing or Audit Trail, recording all user operations with UNDO feature
  • Use of aggregate data models for reports.
  • Transparent cache logic, custom data back-ends and behaviour/callback support.

By separating UI from Data while allowing them interact seamlessly, Agile UI creates a new standard. Any Agile UI component, even if developed by a 3rd party, will fit into any app without overheads and offer consistency in data access, presentation, style and security.

In layman's terms - Developers will be able to find that "file upload component" that fits their need and integrate it with the forms with just few lines of PHP code in minutes instead of days.

Integration with other frameworks

Agile UI is not a FullStack framework. It does not have "routing", "default file locations" or "config file". But it solves the problem of consistent UI building and has been built to be easily compatible with most existing PHP frameworks.

And frameworks like Yii, Laravel, Symfony can use Agile UI through a simple integration.

Any code written in Agile Data / Agile UI will be portable between PHP frameworks. This means you can create a project's frontend in "Laravel" while using Yii for the admin.

Demo (View Source)
Simple Intro
Documentation
github.com/atk4/ui
Fork and Help

For Companies

Enterprise Benefits
Get in touch

Recent News

24 feb: 1.0.0 release

Our first stable release is out! Includes basic "Tables" and "Forms" that work seamlessly with Agile Data.

20 jan: Form finished

Finished implementation for Forms

6 jan: Callback Events

Implemented server-side PHP callbacks for jQuery

20 dec: jQuery chains

Implemented JavaScript and jQuery chain integrations, expressions and more

Full Release History