Your SlideShare is downloading. ×
0
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 Fra...
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...
Types of complexities
•Essential Complexity
•Accidental Complexity
Terms from : “Fred Brooks, 1986, No Silver Bullet”
Comp...
Complexity inherent to the system been designed.
“Everything should be made as simple as possible,
but not simpler.” (A. E...
Accidental Complexity
Any other Extra Complexity arisen from tools, methods,
technologies, etc. used to build the system.
...
From idea  usage
Idea  design  build  test  debug  provision  deploy  usage
Can we do something to speed up this
d...
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
Telerik
AppBuilder
Xamarin
Visual Studio
Eclipse
MS Siena...
• Non coding skills Users
• Amateurs Programmers
• Citizen Developers
• Professional Developers
• Gurus / Hackers
• Code G...
The App industry is growing. End Users joining.
Consumer
• Mobile apps will be a
$77B business by 2017
Business
• Mobile B...
MDE
• Developers: tendency to craftsmanship / artists / Not seen like an engineer…
• Citizen Developers: benefit directly ...
Last week at /Build Conference
Microsoft presented the line of work they are going to push hard:
Connected Devices
• Same ...
Google, Samsung, Microsoft working on:
• Glasses
• Phone
• Tablets
• TVs
• Watches
• Internet of Things
Trend on Connected...
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)
...
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 langua...
But
It is the World most ubiquity computer
runtime ever deployed.
And runs fast in all modern browsers!
JavaScript is not ...
• Global variables
• with keyword
• eval()
• Type coercion
• Block syntax with no block scope
• Optional semicolons (somet...
Typescript typing the un-typed
Type annotations, Generics, modules, classes, interfaces for JS
Hack “typing” to PHP to sup...
•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...
• Graphical editors with a strong
focus on visualization
• Excellent for showing
relationships between objects
Diagram Edi...
Editors on the Web
Demo Time
D←mo
Canvas Surface for drag and drop
controls and UI components
• Shows presentation layouts an
embedding relationships
• Obje...
• Tree Editors
• Table Editors
• Allows to cross two relationships for a set of objects and show or edit a third property ...
Language skills requires time and experience
Level of abstraction of a language is a sword with two edges
• Easy to think ...
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
deta...
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 Format
Server-side
AMD Format
C...
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
• I...
GaaS
Demo Time
D←mo
The world is changing:
• The Cloud is coming & disrupting
• Mobile Devices
• Devices Everywhere
• Citizen Developers creat...
• If we can Model on the Web
as simple as possible
• An then, get the application running on the device
With Zero Technica...
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
Upcoming SlideShare
Loading in...5
×

Modeling on the Web

233

Published on

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.

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Modeling on the Web"

  1. 1. Modeling on the Web Pedro J. Molina, Ahmed Negm, Ruben Jiménez @pmolinam @anegm81 @rubenjmarrufo @icinetic
  2. 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. 3. If I want to jump, but I am not trained What can I do? Question?
  4. 4. A1: Lower the bar Question?
  5. 5. A2: Use High-Tech Question?
  6. 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. 7. Types of complexities •Essential Complexity •Accidental Complexity Terms from : “Fred Brooks, 1986, No Silver Bullet” Complexities on Software
  8. 8. Complexity inherent to the system been designed. “Everything should be made as simple as possible, but not simpler.” (A. Einstein) Essential Complexity
  9. 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. 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. 11. MDE helps to reduce Accidental Complexity. The ultimate “noble” Quest for MDE Make life easier!
  12. 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. 13. • Non coding skills Users • Amateurs Programmers • Citizen Developers • Professional Developers • Gurus / Hackers • Code Generation attendees ;-) • MPS Users };-) User, a segmentation
  14. 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. 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. 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. 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. 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. 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. 20. What is other people doing? State of the Art
  21. 21. Cloud9
  22. 22. Eclipse Orion
  23. 23. MS Monaco
  24. 24. GenMyModel
  25. 25. Martin Thiede http://concrete-editor.org Presented here a CG2010 Four years ago! Concrete Editor
  26. 26. Rafael Chavez @abstratt Cloudfier
  27. 27. We decided at Icinetic: We need to go to the cloud, the sooner, the better. Move to the cloud
  28. 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. 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. 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. 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. 32. •Stateless •Scalable •Run in any browser •It is not a desktop frontend (almost!?) Web
  33. 33. •Stateless •Scalable •Run in any browser •It is not a desktop frontend (almost!?) Web
  34. 34. • Looking for • Textual • Diagram • Projectional • Tabular • Mixed forms. Editors for Models
  35. 35. • Grammars • BNF • Parsers • Facilities • Inline errors • Syntax Coloring • Code Completion Textual Editors
  36. 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. 37. • Graphical editors with a strong focus on visualization • Excellent for showing relationships between objects Diagram Editors
  38. 38. Editors on the Web Demo Time D←mo
  39. 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. 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. 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. 42. End User Levels of abstraction for App Design Power User Developer Expert Developer / Architect
  43. 43. • Simple Model for End Users • Powerful for advanced users • Full expressiveness power for developers: access to full details Progressive Modeling
  44. 44. Progressive Modeling. Sample
  45. 45. Progressive Modeling. Sample
  46. 46. Progressive Modeling on http://radarconline.com (in Private Beta) All of you invited to try! Demo Time D←mo
  47. 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. 48. Backend / Cloud Frontend • Where to validate? • XRefs? • How to propagate? Models everywhere
  49. 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. 50. GaaS Demo Time D←mo
  51. 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. 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. 53. Lowering the Entry Barriers to Build Apps Conclusions
  54. 54. www.icinetic.com Thank you
  55. 55. “Devices everywhere & Platform Fragmentation have potential to make MDE inevitable.” A Prediction
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×