modeling on the web
DESCRIPTION
Modeling Software on the browser provides great benefits like zero deployment and multi-device. However providing modeling infrastructure on the browser require entering in the JavaScript world to create all the infrastructure needed. In this talk, such infrastructure for textual, projectional and diagram DSLs are discused. Session presented at Code Generation 2014.TRANSCRIPT
![Page 1: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/1.jpg)
Modeling on the Web
Pedro J. Molina, Ahmed Negm, Ruben Jiménez
@pmolinam @anegm81 @rubenjmarrufo
@icinetic
![Page 2: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/2.jpg)
Icinetic
• We do MDSD Tools for Developers, Citizen Developers & End-Users
• HQ in Seville, Spain, EU
• Offices in San Francisco, Seattle, Cairo, Seville & Madrid
http://www.icinetic.com/
![Page 3: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/3.jpg)
If I want to jump, but I am not trained
What can I do?
Question?
![Page 4: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/4.jpg)
A1: Lower the bar
Question?
![Page 5: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/5.jpg)
A2: Use High-Tech
Question?
![Page 6: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/6.jpg)
Creating applications is getting more and more
complex:
Technologies, frameworks, versions, dependencies, different
screen sizes and aspect ratios, incompatible API &
vendors, platform fragmentation…
How we can help as the MDE community?
Why the metaphor?
![Page 7: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/7.jpg)
Types of complexities
•Essential Complexity
•Accidental Complexity
Terms from : “Fred Brooks, 1986, No Silver Bullet”
Complexities on Software
![Page 8: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/8.jpg)
Complexity inherent to the system been designed.
“Everything should be made as simple as possible,
but not simpler.” (A. Einstein)
Essential Complexity
![Page 9: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/9.jpg)
Accidental Complexity
Any other Extra Complexity arisen from tools, methods,
technologies, etc. used to build the system.
Programming languages, tools, frameworks… computers,
devices introduce many, many Accidental Complexity.
![Page 10: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/10.jpg)
From idea usage
Idea design build test debug provision deploy usage
Can we do something to speed up this
delivery critical path?
Accidental Complexities
![Page 11: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/11.jpg)
MDE helps to reduce Accidental Complexity.
The ultimate “noble” Quest for MDE
Make life easier!
![Page 12: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/12.jpg)
Radarc online
Radarc
Abstraction Level covered by tools
High
Low
TelerikAppBuilder
Xamarin
Visual StudioEclipse
MS Siena
Wizards
Models
Code
Graphical Design
HTML+JS
Native code
Drag&Drop Models
Deployed App
Compiled App
![Page 13: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/13.jpg)
• Non coding skills Users
• Amateurs Programmers
• Citizen Developers
• Professional Developers
• Gurus / Hackers
• Code Generation attendees ;-)
• MPS Users };-)
User, a segmentation
![Page 14: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/14.jpg)
The App industry is growing. End Users joining.
Consumer
• Mobile apps will be a
$77B business by 2017
Business
• Mobile Business apps will
be worth almost $50B by
2017
• In 2013, an estimated 200
million workers used
mobile business apps
Citizen Developers
• Users operating outside of
the scope of enterprise IT
and its governance who
creates new business
applications for
consumption by others -
Gartner
• In 2014, 25% of new
business applications will
be delivered by Citizen
Developers
![Page 15: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/15.jpg)
MDE
• Developers: tendency to craftsmanship / artists / Not seen like an engineer…
• Citizen Developers: benefit directly from automation and complexity hiding
• We are not going to be enough
• MDE is a tool for Lowering the Entry Barrier
• Allowing non programmers to DIY to solve their day to day problems
• Mobility, Ubiquity computers, Different UI, UX, form factors
The role of MDE
![Page 16: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/16.jpg)
Last week at /Build Conference
Microsoft presented the line of work they are going to push hard:
Connected Devices
• Same App
• Cross Devices: Tablet / Phone
• Adapted to the context (device, form factor, & user needs)
Trend on Connected Devices
Windows 8.1 Blue
![Page 17: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/17.jpg)
Google, Samsung, Microsoft working on:
• Glasses
• Phone
• Tablets
• TVs
• Watches
• Internet of Things
Trend on Connected Devices
Main Features
• Same Services
• Cross Devices
• Contextual
![Page 18: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/18.jpg)
My code,
my Treasure,
my IDE?
Where is my IDE now?
It’s going with wind…
to The Cloud!
My code, my Treasure
![Page 19: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/19.jpg)
Everything going to The Cloud. Why?
• Zero installation
• Instant updates
• Do it from any device, any time (any browser)
My IDE on The Cloud
![Page 20: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/20.jpg)
What is other people doing?
State of the Art
![Page 21: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/21.jpg)
Cloud9
![Page 22: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/22.jpg)
Eclipse Orion
![Page 23: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/23.jpg)
MS Monaco
![Page 24: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/24.jpg)
GenMyModel
![Page 25: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/25.jpg)
Martin Thiede
http://concrete-editor.org
Presented here a CG2010
Four years ago!
Concrete Editor
![Page 26: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/26.jpg)
Rafael Chavez
@abstratt
Cloudfier
![Page 27: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/27.jpg)
We decided at Icinetic:
We need to go to the cloud,
the sooner, the better.
Move to the cloud
![Page 28: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/28.jpg)
Because
Not Typed
Relaxed syntax error prone
WAT Programming: http://bit.ly/watProg
JavaScript is not my favorite language
[] + []
[] + {}
{} + []
{} + {}
“”
[Object Object]
0
NaN
![Page 29: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/29.jpg)
ButIt is the World most ubiquity computer
runtime ever deployed.
And runs fast in all modern browsers!
JavaScript is not my favorite language
![Page 30: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/30.jpg)
• Global variables
• with keyword
• eval()
• Type coercion
• Block syntax with no block scope
• Optional semicolons (sometimes, some browsers, but not all)
First Developer Sin: Lack of understanding of its prototypical inheritance
Recommended reading: Douglas Crockford book. “JavaScript: The Good parts”
JavaScript main Sins
![Page 31: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/31.jpg)
Typescript typing the un-typed
Type annotations, Generics, modules, classes, interfaces for JS
Hack “typing” to PHP to support a gigantic codebase that has to be maintained.
Dynamic typing languages are good for quick prototyping.
Static typing languages are better for maintaining code.
Compilers provide you a chance to catch some type error before the user see them.
In any case, Unit Testing is A MUST in both code-camps.
Taming the ‘wild’ JavaScript
http://hacklang.org
http://www.typescriptlang.org
![Page 32: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/32.jpg)
•Stateless
•Scalable
•Run in any browser
• It is not a desktop frontend (almost!?)
Web
![Page 33: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/33.jpg)
•Stateless
•Scalable
•Run in any browser
• It is not a desktop frontend (almost!?)
Web
![Page 34: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/34.jpg)
• Looking for
• Textual
• Diagram
• Projectional
• Tabular
• Mixed forms.
Editors for Models
![Page 35: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/35.jpg)
• Grammars
• BNF
• Parsers
• Facilities
• Inline errors
• Syntax Coloring
• Code Completion
Textual Editors
![Page 36: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/36.jpg)
• Easier to use for non programmers
• The editor follows the form of the model
• Difficult to create non consistent models
• Limited, constrained
Projectional Editors
![Page 37: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/37.jpg)
• Graphical editors with a strong
focus on visualization
• Excellent for showing
relationships between objects
Diagram Editors
![Page 38: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/38.jpg)
Editors on the Web
Demo Time
D←mo
![Page 39: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/39.jpg)
Canvas Surface for drag and drop
controls and UI components
• Shows presentation layouts an
embedding relationships
• Objects can be setup one by one to the
detail with an auxiliary Property Grid
Editor
Designer Editor
![Page 40: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/40.jpg)
• Tree Editors
• Table Editors
• Allows to cross two relationships for a set of objects and show or edit a third property in a tabular way
• Custom Editors
• Wizard style or free form of editor are also a good choice when UX is the key issue to address
• Composed Editors
• The previous one shows some paradigms for editor. Combining the previous ones to created compounded
editors allows to create a complex one.
Other Editors
![Page 41: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/41.jpg)
Language skills requires time and experience
Level of abstraction of a language is a sword with two edges
• Easy to think in such abstractions
• Removes other details
What happens when we need to go deeper in the details?
• Progressive Modeling
Customizations Cliffs
![Page 42: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/42.jpg)
End User
Levels of abstraction for App Design
Power User
Developer
Expert Developer / Architect
![Page 43: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/43.jpg)
• Simple Model for End Users
• Powerful for advanced users
• Full expressiveness power for developers: access to full
details
Progressive Modeling
![Page 44: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/44.jpg)
Progressive Modeling. Sample
![Page 45: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/45.jpg)
Progressive Modeling. Sample
![Page 46: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/46.jpg)
Progressive Modeling on
http://radarconline.com (in Private Beta)
All of you invited to try!
Demo Time
D←mo
![Page 47: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/47.jpg)
Models everywhere: generation/build pipeline
Metamodel.meta Model.ts
parser.pegjs
Comon-js FormatServer-side
AMD FormatClient/Browser-side
Model.js
parser.js
Model.js
parser.js
Generation
JSON
Model.cs
Parser.cs
Model.java
Lang.gram
Meta-definitons
![Page 48: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/48.jpg)
Backend / Cloud
Frontend
• Where to validate?
• XRefs?
• How to propagate?
Models everywhere
![Page 49: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/49.jpg)
Generation as a Service• If your IDE is in the cloud,
• If your modeling is the cloud,
• If your code is on the cloud
• IaaS, PaaS, SaaS
Where to put your code generators?
GaaS
![Page 50: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/50.jpg)
GaaS
Demo Time
D←mo
![Page 51: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/51.jpg)
The world is changing:
• The Cloud is coming & disrupting
• Mobile Devices
• Devices Everywhere
• Citizen Developers creating Apps
Conclusions
So, do we:
• Getting ready for Cloud
• Modeling once on the web
• Tools for Citizen Developers
• Reducing accidental complexity
• Delivering Native Apps cross-devices
![Page 52: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/52.jpg)
• If we can Model on the Web
as simple as possible
• An then, get the application running on the device
With Zero Technical Details
• We have removed much of the Accidental Complexity
Conclusions
![Page 53: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/53.jpg)
Lowering the Entry Barriers to Build Apps
Conclusions
![Page 54: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/54.jpg)
www.icinetic.com
Thank you
![Page 55: Modeling on the Web](https://reader036.vdocuments.mx/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/55.jpg)
“Devices everywhere & Platform Fragmentation
have potential
to make MDE inevitable.”
A Prediction