Design First. Then Code.

An overview of the concepts behind System Runtime and and introduction to System Designer.

edit: 02/17 update links, images and project names

Transcript

1. DESIGN FIRST. THEN CODE. Create applications driven by your design [ designfirst.io ]
2. HOW TO UNDERSTAND THE LOGIC OF A WEB APP
3. CLASSIC WAY • read the documentation • talk to the dev • read the code • launch some code analysis tools
4. BETTER WAY ? • Learn from other languages • Use the specificities of JavaScript: « JavaScript is a high level, dynamic, untyped, and interpreted programming language » -Wikipedia
5. DEMO update the model of a web app and a server app
6. APPLICATIONS ARE SYSTEMS
7. CONCEPTS BEHIND SYSTEM MODEL DRIVEN COMPOSITION COMPONENT BEHAVIOR MSON MDA UML ODM STATE METAMODEL
8. DESIGN FIRST THEN CODE
9. DEFINITION • « A system is a set of interacting or interdependent components forming an integrated whole. » • « A system has structure, it contains parts (or components) that are directly or indirectly related to each other. » • « A system has behavior, it exhibits processes that fulfill its function or purpose. » • « A system has interconnectivity: the parts and processes are connected by structural and/or behavioral relationships. » • « A system's structure and behavior may be decomposed via subsystems and sub- processes to elementary parts and process steps. » -Wikipedia

10. APPLICATION AS A SYSTEM • a system is a set of models, behaviors and components • a component is an immutable statefull object • a structure is defined by a schema • a behavior is what a component does when we make an action on it • interconnectivity is the relationships between components defined by the model • every systems can be decomposed on subsystems
11. APPLICATION AS A SYSTEM MODEL BEHAVIOR COMPONENT A SYSTEM
12. • Define the structure of the components and the relationships betweens them MODEL BEHAVIOR COMPONENT
13. • Define the behavior of the components, i.e what components do when actions are made (change of state, events, methods) MODEL BEHAVIOR COMPONENT
14. • Statefull objects that compose your application MODEL BEHAVIOR COMPONENT
15. HOW TO RUN YOUR SYSTEM ?
16. WITH A SYSTEM RUNTIME SYSTEM NOSQL DB METAMODEL WORKFLOW ENGINE
17. METAMODEL • Abstraction of the model • Manage the model • Generate the classes of the component based on the model definition
18. WORKFLOW ENGINE • Automate components actions and insure that they are always compliant with the model
19. NOSQL DB • Store your model, behaviors, components and states
20. ARCHITECTURE ACTION COMPONENT WORKFLOW MODEL BEHAVIOR
21. SYSTEM RUNTIME A JavaScript runtime for systems
22. SYSTEM RUNTIME METAMODEL • The definition of the model is made on a JSON format called MSON (Metamodel JavaScript Object Notation), no code is needed • With MSON you can define types, classes, one to one / one to many relationships and multi inheritance between classes • MSON is based on UML • S y s t e m R u n t i m e u s e s t h e M o d e l - D ri ve n Architecture approach to create classes based on your design. Use them to instantiate your components
23. SYSTEM RUNTIME WORKFLOW • System Runtime checks on runtime that your components are compliant with your model • System Runtime can stop your system if a problem was found When you call a method, an event or update a property, System Runtime workflow will check if all is ok to valid the change of state of the component. It means: • for a property: the type of the value is valid with the model • for a method: the number of parameters, their types and the result are valid with the model • for an event: the number of parameters and their numbers are valid with the model
24. SYSTEM RUNTIME NOSQL DB • System Runtime acts as an ODM (Object- Document Mapper) to manage your components as NoSQL Documents • Update a document will update directly the related component • System Runtime NoSQL DB stores your components and you can export/import them into another System Runtime NoSQL Database
25. EXAMPLES
26. OTHER FEATURES • Everything is a component • Everything is JSON: all your code can be serialized in JSON • Behaviors are dynamically evaluated: they can be replaced at runtime and they have a real scope • Universal: you can create client and server systems • Unit tests are native • Package management is native • Few apis and light (21 ko gzip) • VanillaJS (ES5)
27. SYSTEM COMPOSITION
28. YOUR SYSTEM SYSTEM RUNTIME CORE SYSTEM SYSTEM RUNTIME CORE SYSTEM SYSTEM RUNTIME CORE APIS
29. YOUR SYSTEM SUB-SYSTEM sub-system1 sub-system2 sub-system3
30. ADDONS SYSTEM SYSTEM RUNTIME CORE SYSTEM ADDON1 ADDON2 ADDON3
31. COMMUNICATION BETWEEN SYSTEMS
32. server / browser CHANNEL server / browser SYSTEM SSYSTEM channel
33. SYSTEM RUNTIME BUILD SYSTEM • continuus integration: travis • code analysis: jshint + code coverage • test: karma + jasmine (server / client) • doc generation: yuidoc
34. SYSTEM DESIGNER An IDE for designing applications driven by the model
35. SYSTEM DESIGNER
36. FEATURES • Create system • Snapshot of system: remote designing of running systems • SDK: the designer is made with System Runtime, so its system is configurable • Full front app: no server need
37. EXAMPLES Design System Designer with System Designer
38. QUESTIONS ? [ designfirst.io ]