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?

4. A1: Lower the bar
Question?

5. A2: Use High-Tech
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

13. • Non coding skills Users
• Amateurs Programmers
• Citizen Developers
• Professional Developers
• Gurus / Hackers
• Code Generation attendees ;-)
• MPS Users };-)
User, a segmentation

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

20. What is other people doing?
State of the Art

21. Cloud9

22. Eclipse Orion

23. MS Monaco

24. GenMyModel

25. Martin Thiede
http://concrete-editor.org
Presented here a CG2010
Four years ago!
Concrete Editor

26. Rafael Chavez
@abstratt
Cloudfier

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

32. •Stateless
•Scalable
•Run in any browser
•It is not a desktop frontend (almost!?)
Web

33. •Stateless
•Scalable
•Run in any browser
•It is not a desktop frontend (almost!?)
Web

34. • Looking for
• Textual
• Diagram
• Projectional
• Tabular
• Mixed forms.
Editors for Models

35. • Grammars
• BNF
• Parsers
• Facilities
• Inline errors
• Syntax Coloring
• Code Completion
Textual Editors

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

38. Editors on the Web
Demo Time
D←mo

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

44. Progressive Modeling. Sample

45. Progressive Modeling. Sample

46. Progressive Modeling on
http://radarconline.com (in Private Beta)
All of you invited to try!
Demo Time
D←mo

47. Models everywhere: generation/build pipeline
Metamodel.meta Model.ts
parser.pegjs
Comon-js Format
Server-side
AMD Format
Client/Browser-side
Model.js
parser.js
Model.js
parser.js
Generation
JSON
Model.cs
Parser.cs
Model.java
Lang.gram
Meta-definitons

48. Backend / Cloud
Frontend
• Where to validate?
• XRefs?
• How to propagate?
Models everywhere

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

50. GaaS
Demo Time
D←mo

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

53. Lowering the Entry Barriers to Build Apps
Conclusions

54. www.icinetic.com
Thank you

55. “Devices everywhere & Platform Fragmentation
have potential
to make MDE inevitable.”
A Prediction