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.
1. Modeling on the Web
Pedro J. Molina, Ahmed Negm, Ruben Jiménez
@pmolinam @anegm81 @rubenjmarrufo
@icinetic
2. 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/
3. If I want to jump, but I am not trained
What can I do?
Question?
6. 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?
7. Types of complexities
•Essential Complexity
•Accidental Complexity
Terms from : “Fred Brooks, 1986, No Silver Bullet”
Complexities on Software
8. Complexity inherent to the system been designed.
“Everything should be made as simple as possible,
but not simpler.” (A. Einstein)
Essential Complexity
9. 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.
10. From idea usage
Idea design build test debug provision deploy usage
Can we do something to speed up this
delivery critical path?
Accidental Complexities
11. MDE helps to reduce Accidental Complexity.
The ultimate “noble” Quest for MDE
Make life easier!
12. Radarc online
Radarc
Abstraction Level covered by tools
High
Low
Telerik
AppBuilder
Xamarin
Visual Studio
Eclipse
MS Siena
Wizards
Models
Code
Graphical Design
HTML+JS
Native code
Drag&Drop Models
Deployed App
Compiled App
14. 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
15. 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
16. 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
17. Google, Samsung, Microsoft working on:
• Glasses
• Phone
• Tablets
• TVs
• Watches
• Internet of Things
Trend on Connected Devices
Main Features
• Same Services
• Cross Devices
• Contextual
18. My code,
my Treasure,
my IDE?
Where is my IDE now?
It’s going with wind…
to The Cloud!
My code, my Treasure
19. Everything going to The Cloud. Why?
• Zero installation
• Instant updates
• Do it from any device, any time (any browser)
My IDE on The Cloud
27. We decided at Icinetic:
We need to go to the cloud,
the sooner, the better.
Move to the cloud
28. Because
Not Typed
Relaxed syntax error prone
WAT Programming: http://bit.ly/watProg
JavaScript is not my favorite language
[] + []
[] + {}
{} + []
{} + {}
“”
[Object Object]
0
NaN
29. But
It is the World most ubiquity computer
runtime ever deployed.
And runs fast in all modern browsers!
JavaScript is not my favorite language
30. • 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
31. 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
36. • Easier to use for non programmers
• The editor follows the form of the model
• Difficult to create non consistent models
• Limited, constrained
Projectional Editors
37. • Graphical editors with a strong
focus on visualization
• Excellent for showing
relationships between objects
Diagram Editors
39. 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
40. • 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
41. 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
42. End User
Levels of abstraction for App Design
Power User
Developer
Expert Developer / Architect
43. • Simple Model for End Users
• Powerful for advanced users
• Full expressiveness power for developers: access to full
details
Progressive Modeling
49. 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
51. 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
52. • 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