Modeling on the Web

Pedro J. Molina, Ahmed Negm, Ruben Jiménez

@pmolinam @anegm81 @rubenjmarrufo

@icinetic

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/

If I want to jump, but I am not trained

What can I do?

Question?

A1: Lower the bar

Question?

A2: Use High-Tech

Question?

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?

Types of complexities

•Essential Complexity

•Accidental Complexity

Terms from : “Fred Brooks, 1986, No Silver Bullet”

Complexities on Software

Complexity inherent to the system been designed.

“Everything should be made as simple as possible,

but not simpler.” (A. Einstein)

Essential Complexity

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.

From idea usage

Idea design build test debug provision deploy usage

Can we do something to speed up this

delivery critical path?

Accidental Complexities

MDE helps to reduce Accidental Complexity.

The ultimate “noble” Quest for MDE

Make life easier!

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

• Non coding skills Users

• Amateurs Programmers

• Citizen Developers

• Professional Developers

• Gurus / Hackers

• Code Generation attendees ;-)

• MPS Users };-)

User, a segmentation

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

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

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

Google, Samsung, Microsoft working on:

• Glasses

• Phone

• Tablets

• TVs

• Watches

• Internet of Things

Trend on Connected Devices

Main Features

• Same Services

• Cross Devices

• Contextual

My code,

my Treasure,

my IDE?

Where is my IDE now?

It’s going with wind…

to The Cloud!

My code, my Treasure

Everything going to The Cloud. Why?

• Zero installation

• Instant updates

• Do it from any device, any time (any browser)

My IDE on The Cloud

What is other people doing?

State of the Art

Cloud9

Eclipse Orion

MS Monaco

GenMyModel

Martin Thiede

http://concrete-editor.org

Presented here a CG2010

Four years ago!

Concrete Editor

Rafael Chavez

@abstratt

Cloudfier

We decided at Icinetic:

We need to go to the cloud,

the sooner, the better.

Move to the cloud

Because

Not Typed

Relaxed syntax error prone

WAT Programming: http://bit.ly/watProg

JavaScript is not my favorite language

[] + []

[] + {}

{} + []

{} + {}

“”

[Object Object]

0

NaN

ButIt is the World most ubiquity computer

runtime ever deployed.

And runs fast in all modern browsers!

JavaScript is not my favorite language

• 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

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

•Stateless

•Scalable

•Run in any browser

• It is not a desktop frontend (almost!?)

Web

•Stateless

•Scalable

•Run in any browser

• It is not a desktop frontend (almost!?)

Web

• Looking for

• Textual

• Diagram

• Projectional

• Tabular

• Mixed forms.

Editors for Models

• Grammars

• BNF

• Parsers

• Facilities

• Inline errors

• Syntax Coloring

• Code Completion

Textual Editors

• Easier to use for non programmers

• The editor follows the form of the model

• Difficult to create non consistent models

• Limited, constrained

Projectional Editors

• Graphical editors with a strong

focus on visualization

• Excellent for showing

relationships between objects

Diagram Editors

Editors on the Web

Demo Time

D←mo

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

• 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

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

End User

Levels of abstraction for App Design

Power User

Developer

Expert Developer / Architect

• Simple Model for End Users

• Powerful for advanced users

• Full expressiveness power for developers: access to full

details

Progressive Modeling

Progressive Modeling. Sample

Progressive Modeling. Sample

Progressive Modeling on

http://radarconline.com (in Private Beta)

All of you invited to try!

Demo Time

D←mo

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

Backend / Cloud

Frontend

• Where to validate?

• XRefs?

• How to propagate?

Models everywhere

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

GaaS

Demo Time

D←mo

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

• 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

Lowering the Entry Barriers to Build Apps

Conclusions

www.icinetic.com

Thank you

“Devices everywhere & Platform Fragmentation

have potential

to make MDE inevitable.”

A Prediction