Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Framework Enabling End-Users
to Maintain Web Applications
Masayuki Nii, Kenji Tei and Fuyuki Ishikawa
ICICWS 2015, March 1...
Key Points
Issues in business systems

• Lack of maintenance brings on gradual degradation of systems.

• End-user partici...
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.

•...
End-User Participation
How can we resolve?

• Involve end-users into development processes.

• But they don’t have skill t...
Declarative Web Application Framework
INTER-Mediator

• We developed the framework using
OSS, GitHub, MIT License.

• Supp...
Development Model We Assumed
Remarks

• IT Professionals will work from the scratch to almost cut-off.

• End-users can par...
Questions about End-User Maintenance
Top-level question:

• Can end-users participate any development process especially
m...
Does INTER-Mediator have
Enough Usability to Allow
Maintenance by End-users?
Image courtesy of digitalart at FreeDigitalPh...
Categorizing Maintenance Tasks
Occasions Examples in Declarative Examples Non-Declarative
1 Page Elements
• Order of eleme...
Modification Example
Example demand

• Invoice has been made. Total price with tax is shown on “total.”

• Want to show the...
Does INTER-Mediator Have
Enough Features to Develop
Practical Applications?
Image courtesy of renjith krishnan at FreeDigi...
Feature Set of Web Framework
CRUD + Repeat + Relationship

• Read and Update: Binding setting the “data-im” attribute.

• ...
Enclosure/Repeater and Relationship
<table><thead>
<tr><th>issueddt</th><th></th>detail</tr></thead>
<tbody> <!—Enclosure-...
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...
Result of the Experiment
8 test subjects could acquire the knowledge to develop in 2 hours.

• Results can divide into 2 c...
Conclusions
Image courtesy of Master isolated images at FreeDigitalPhotos.net
Conclusions
INTER-Mediator; develop with declarative descriptions.

• Can be maintained with declarative descriptions.

• ...
Upcoming SlideShare
Loading in …5
×

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

1,167 views

Published on

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

Published in: Internet
  • Be the first to comment

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

  1. 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. 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. 3. Background and the Development with the Framework “INTER-Mediator” Image courtesy of njaj at FreeDigitalPhotos.net
  4. 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. 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. 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. 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. 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. 9. Does INTER-Mediator have Enough Usability to Allow Maintenance by End-users? Image courtesy of digitalart at FreeDigitalPhotos.net
  10. 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. 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. 12. Does INTER-Mediator Have Enough Features to Develop Practical Applications? Image courtesy of renjith krishnan at FreeDigitalPhotos.net
  13. 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. 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. 15. Can End-Users Learn to Develop with INTER- Mediator? Image courtesy of Master isolated images at FreeDigitalPhotos.net
  16. 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. 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. 18. Conclusions Image courtesy of Master isolated images at FreeDigitalPhotos.net
  19. 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

×