Modeling on the Web


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
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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
  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 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: 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
  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 (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 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. Thank you
  55. 55. “Devices everywhere & Platform Fragmentation have potential to make MDE inevitable.” A Prediction