Framework Enabling End-Users to Maintain Web ApplicationsMasayuki Nii, Kenji Tei and Fuyuki Ishikawa

ICICWS 2015, March 19, 2015

Presenter: Masayuki NiiPh.D. Student,

Graduate School of Information SystemsThe University of Electro-Communications

Key Points

Issues in business systems• Lack of maintenance brings on gradual degradation of systems.• End-user participation is a possible solution.

Web application framework by declarative descriptions• We are developing framework “INTER-Mediator.”• Imperative programming costs a lot.• Declarative descriptions can cost less.

Activate framework development and investigation • Most of major features by declarative descriptions.• Some parts of maintenance task can be done by end-users.• Non-developers could learn how to develop in approximately 2 hours.

Research result• INTER-Mediator-based system can be maintained by end-users.

2

Background and the Development with the Framework “INTER-Mediator”

Image courtesy of njaj at FreeDigitalPhotos.net

Status of Business System Development

Typical Solutions for Web-based Business System• Need to order from IT venders.• Built with MVC-style framework, ex. Smarty, CakePHP.

Problems• Require imperative programming.

- End-users can’t participate in development processes.- They have to order from IT venders.

• In case of limited budgets- They can’t order to maintain.- Degraded system due to lack of maintenance.- The system must be abandoned.

4Image courtesy of David Castillo Dominici at FreeDigitalPhotos.net

End-User Participation

How can we resolve?• Involve end-users into development processes.• But they don’t have skill to programming.• Moreover they don’t want to study!

How to involve end-users?• Declarative descriptions, not imperative.

Why declarative?• Lower design barriers (in the six barriers in learning*).• Possible to describe without professional-level programming skill.• Less learning costs. Less learning time.

5* Ko, Myers and Aung: Six Learning Barriers in End-User Programming Systems, VLHCC '04

Image courtesy of Master isolated images at FreeDigitalPhotos.net

programming?

Declarative Web Application Framework

INTER-Mediator• We developed the framework using

OSS, GitHub, MIT License.• Supports OSS DB engines, MySQL,

PostgreSQL, SQLite, and also FileMaker Server.

• HTML5-savvy browser is required.

How to be declarative?• Prepare the database applied with the

schema.• Create two files, “Page File” and

“Definition File.”• The Page File is pure HTML5 page

template.• The Definition File is a PHP file

- The descriptions are just a key-value style and it means “declarative.”

6

<?php require_once('INTER-Mediator.php'); IM_Entry( array( array( 'name' => 'postalcode', 'records' => 10, 'paging' => true,),), null, array('db-class' => 'PDO'), false );

Definition File

<div data-im=“postalcode@f3"> </div> Show the value of “f3” field in records from “postalcode” table.

<input type=“text” data-im=“postalcode@f7”/> Show the value of “f7” field, and update if user modify the string in this text field.

Page File

Development Model We Assumed

Remarks• IT Professionals will work from the scratch to almost cut-off.• End-users can participate maintenance phase, and also modification at

the final stage of initial development and testing phases.• INTER-Mediator has the imperative programming interface to implement

complex requirements.

Job Analysis System Design

UX Design

Defining Schema

Create Definition File

Requirement Create Page File

Development

Testing Maintenance

Development Processes

Same as other Frameworks.

INTER-Mediator Specific Processes: Mainly

Declarative Descriptions

Imperative Programming are Required in other Common Web Frameworks.

7

Questions about End-User Maintenance

Top-level question:• Can end-users participate any development process especially

maintenance of INTER-Mediator driven business system?

This question divides into: Does INTER-Mediator have…?• Enough usability to allow maintenance by end-users.• Enough features to develop practical applications.• Learnability for non-developers.

8

Does INTER-Mediator have Enough Usability to Allow Maintenance by End-users?

Image courtesy of digitalart at FreeDigitalPhotos.net

Categorizing Maintenance Tasks

Occasions Examples in Declarative Examples Non-Declarative

1 Page Elements• Order of elements, Disapper them• Add a field already in database• Change the color of characters

• Require to modify db schema• Special event handling; ex. other than

form elements

2 Request to Database

• Modify the query criteria• Modify the sort condition• Add the button to create and delete• UI components for search page

• Change parameters dynamically• Request with sub-query

3 Response to Single Field

• Change the decimal digits• Add constant strings before/after the data• Calculated property

• Unsupported conversion

4 UI Customize• Button with a special procedure• Update any elements

5 Database Response

• Unsupported aggregation by database

6 Modify Schema• Create a new view• Create a table or a field

* Create New Page

• Create from scratch• After copying an existing page, apply above 1-6

10

Modification Example

Example demand• Invoice has been made. Total price with tax is shown on “total.”• Want to show the total without price.

Add the calculated property “subtotal”• Define the expression to calculate the value.• Add the new element to show the “subtotal” field.• Modify within declarative descriptions.

Other MVC-style frameworks• Modify any models to define the new property.• Any controllers/views requires respond the to new property.• Both require to modify imperative descriptions.

array( 'name' => 'invoice', 'calculation' => array( array('field' => 'subtotal', 'expression' => ‘Round(total/1.08)’),),), array( ‘name’ => ‘detail’, :

Modified Context in Definition File11

<span data-im=“invoice@subtotal> </span>

Example of “1.Page Elements”Example of

“3.Response to Single file”

Add Element to Definition File

Does INTER-Mediator Have Enough Features to Develop Practical Applications?

Image courtesy of renjith krishnan at FreeDigitalPhotos.net

Feature Set of Web Framework

CRUD + Repeat + Relationship• Read and Update: Binding setting the “data-im” attribute.• Create and Delete: Add buttons, generate the pagination control.

Feature set with declarative descriptions• Covering the 31 item’s function set from the end-user’s view point**,

without just one item.• Twenty five items of 31 are supported by declarative descriptions.

Distinguishing features• Repeating elements with multiple records

- In a table, TR is “Repeater” and its parent TBODY is “Enclosure.”- One record expand into the Repeater, and repeat it for each records.

• Show associated records based on relationship- Recursively defined Enclosure/Repeater.- Inside of them retrieve the associated record with using relationship

definitions.** Rode and Rosson: Programming at Runtime: Requirements and Paradigms for Nonprogrammer Web Application Development, HCC '03

13

Enclosure/Repeater and Relationship<table><thead> <tr><th>issueddt</th><th></th>detail</tr></thead> <tbody>　<!—Enclosure-A--> <tr>　 <!—Repeater-A—> <td data-im=“invoice@issueddt”></td> <td> <table> <thead><th>productid</th><th>qty</th></thead> <tbody> <!--Enclosure-B—> <tr> <!—Repeater-B--> <td data-im=“detail@productid”></td> <td data-im=“detail@qty”></td> </tr> </tbody> </table> </td> </tr> </tbody> </table>

3245 2014-5-22 16:15

2014-5-22 10:052014-5-22 13:55

issueddt

2014-5-22 16:153244

32423243

invoiceid

390220 243244

invoiceid

3242 12100233

100655

120443

9

productid

10023332443243 45

3242qty5

“invoice” table

“detail” table

relationshipPage File

Database

Summary of Algorithm

“detail” Context

“invoice” Context

PageConstruct

SeekEnclosure

ExpandEnclosure

ExpandRepeater

Scan nodes with pre-order scanning.

Detect an enclosure

Called just after load of page contents/Start from root node.

Keep the repeater in a variable.Detect the context specified in nodes.Query the database (If the relationship is defined, it’s included in conditions.)

If the context is undetermined, scan for every repeaters

Repeat for each records- Store the field values in the record.- Insert the field values into the copied repeater.- Append the copy to the enclosure

Scan the inside of the copied repeater

Retrieved recordset

14

2014-5-22 16:15

2014-5-22 13:55

2014-5-22 10:0512

100233120443

productid qty512

100233120443

productid qty5

issueddt

productid100233 45

qtyproductid100233 45

qty

detail

390220 24100655 9

productid qty

390220 24100655 9

productid qtyGenerated Page

Can End-Users Learn to Develop with INTER-Mediator?

Image courtesy of Master isolated images at FreeDigitalPhotos.net

Experiment with Test Subjects

What do we need to know?• Learnability for non-software engineers.

Procedure• Study and examination sessions with original textbook.• Judge from the result of the examination whether they could get

knowledge.• Both sessions were done with web site at their own pace.• Time spent on the test was measured by the system.• Subject studied about only using declarative descriptions not using

imperative APIs.

Subjects• Web designers and HTML coding specialists working in web industry.• No one works as a “programmer.” Their programming is just auxiliary.• Not pure end-users, but their skill of system development is similar to

end-users.• Assume that they have HTML skills, and so we can measure just the

learnability of INTER-Mediator.16

Result of the Experiment

8 test subjects could acquire the knowledge to develop in 2 hours.• Results can divide into 2 categories.• Four subjects finished the examination within 15 minutes. Their scores are quite

low; 0-13%. This means they couldn’t learn.• Other 8 subjects took over 45 minutes for the examination. Their scores were

42-93%. This means they succeed to learn.• Within successful subjects, programming experience might contribute to

learning result.• On the other hand, half of failed subjects did have programming experience.

0%#20%#40%#60%#80%#100%#

S2#S12#S7#S3#S5#S1#S10#S11#S9#S6#S4#S8#

Scores� Subjects�

S2#

S3#

S10#

Programming#Experiences#of#subjects�

JavaScript#+#PHP�

JavaScript�

None�

(NoneG>)�

0" 15" 30" 45" 60" 75" 90" 105" 120" 135" 150" 165" 180"

S2"S12"S7"S3"S5"S1"S10"S11"S9"S6"S4"S8"

The$$Amount$of$Time$(minutes)�Subjects�

The"Time"for"the"examina9on"(minutes)"

The"Time"for"the"study"(minutes)"

17

Conclusions

Image courtesy of Master isolated images at FreeDigitalPhotos.net

Conclusions

INTER-Mediator; develop with declarative descriptions.• Can be maintained with declarative descriptions.• Enough features

- Especially Enclosure/Repeater mechanism is unique.• Learnability for web designers as proven from the experiment.

Consequently INTER-Mediator does allow to participation of end-users in maintaining their business systems.

http://inter-mediator.com/

19

Presenter → Masayuki Niinii@msyk.net msyknii msyknii

This presentation → http://nii.ac/impr