Modeling on the Web
description
Transcript of Modeling on the Web
![Page 1: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/4.jpg)
A1: Lower the bar
Question?
![Page 5: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/5.jpg)
A2: Use High-Tech
Question?
![Page 6: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/21.jpg)
Cloud9
![Page 22: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/22.jpg)
Eclipse Orion
![Page 23: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/23.jpg)
MS Monaco
![Page 24: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/24.jpg)
GenMyModel
![Page 25: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/26.jpg)
Rafael Chavez
@abstratt
Cloudfier
![Page 27: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/38.jpg)
Editors on the Web
Demo Time
D←mo
![Page 39: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/44.jpg)
Progressive Modeling. Sample
![Page 45: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/45.jpg)
Progressive Modeling. Sample
![Page 46: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/50.jpg)
GaaS
Demo Time
D←mo
![Page 51: Modeling on the Web](https://reader036.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/53.jpg)
Lowering the Entry Barriers to Build Apps
Conclusions
![Page 54: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/54.jpg)
www.icinetic.com
Thank you
![Page 55: Modeling on the Web](https://reader036.fdocuments.in/reader036/viewer/2022062514/557b9f2ed8b42ac9248b4de8/html5/thumbnails/55.jpg)
“Devices everywhere & Platform Fragmentation
have potential
to make MDE inevitable.”
A Prediction