Framework Enabling End-Users to Maintain Web Applications (ICICWS2015) by Masayuki Nii

1. Framework Enabling End-Users
to Maintain Web Applications
Masayuki Nii, Kenji Tei and Fuyuki Ishikawa
ICICWS 2015, March 19, 2015
Presenter: Masayuki Nii
Ph.D. Student,
Graduate School of Information Systems
The University of Electro-Communications

2. 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

3. Background and the
Development with the
Framework
“INTER-Mediator”
Image courtesy of njaj at FreeDigitalPhotos.net

4. 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

5. 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?

6. 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

7. 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

8. 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

9. Does INTER-Mediator have
Enough Usability to Allow
Maintenance by End-users?
Image courtesy of digitalart at FreeDigitalPhotos.net

10. 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

11. 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 File
11
<span data-im=“invoice@subtotal>
</span>
Example of
“1.Page Elements”Example of
“3.Response to Single file”
Add Element to Definition File

12. Does INTER-Mediator Have
Enough Features to Develop
Practical Applications?
Image courtesy of renjith krishnan at FreeDigitalPhotos.net

13. 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

14. 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:05
2014-5-22 13:55
issueddt
2014-5-22 16:153244
3242
3243
invoiceid
390220 243244
invoiceid
3242 12
100233
100655
120443
9
productid
100233
3244
3243 45
3242
qty
5
“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:05
12
100233
120443
productid qty
5
12
100233
120443
productid qty
5
issueddt
productid
100233 45
qtyproductid
100233 45
qty
detail
390220 24
100655 9
productid qty
390220 24
100655 9
productid qty
Generated Page

15. Can End-Users Learn to
Develop with INTER-
Mediator?
Image courtesy of Master isolated images at FreeDigitalPhotos.net

16. 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

17. 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

18. Conclusions
Image courtesy of Master isolated images at FreeDigitalPhotos.net

19. 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 Nii
nii@msyk.net msyknii msyknii
This presentation → http://nii.ac/impr