State of the Odoo JS framework

Public Channel / Odoo Experience 2016

by Gery Debongnie - Lead Developer, Odoo

Share on Social Networks

Share Link

Use permanent link to share in social media

Share with a friend

Please login to send this presentation by email!

Embed in your website

Select page to start with

11. The Past: a brief history of web client

3. The Past: A Brief history of Odoo client 1

12. The Present: Strengths and weaknesses 2

16. — Spider Man (or maybe Voltaire?) With great power comes great responsibility

4. The Past: a brief history of web client <1 million years: GTK app with python server

20. The Future: New Ideas and design principles 3

27. Thank you. #odooexperience EXPERIENCE 2016

1. Odoo Javascript Framework The state of the web client Géry Debongnie • Lead Developer • RD Framework Team EXPERIENCE 2016

5. 500 000 years ago: GTK client + actual web client The Past: a brief history of web client <1 million years: GTK app with python server

2. The Past: a brief history of Odoo web client 1 The Present: strengths and weaknesses The Future: new ideas and design principles 2 3

17. Weakness: extreme modularity Odoo modules = monkey patching The Present: strengths and weaknesses Any module can change anything Exponential number of combinations Hard to have a coherent system Most of them untested

21. New views View Renderer JS Model (*) Field Widgets (*) (*) Shared between views The Future: new ideas and design principles

6. 100 000 years ago: GTK app is dropped, web client evolves The Past: a brief history of web client 500 000 years ago: GTK client + actual web client <1 million years: GTK app with python server

13. Strength: good abstractions Actions Views Domains Contexts Menu Items Search View (*) Filters The Present: strengths and weaknesses

22. New views View Renderer JS Model (*) Field Widgets (*) (*) Shared between views The Future: new ideas and design principles controller model view

24. ● Move state away from DOM (and into JS) ● Separate rendering from fetching/processing data ● Rendering should be synchronous ● Delegate side effects by triggering events up the component tree Design principles The Future: new ideas and design principles

19. Why Odoo Studio is a big deal (for the web client) Work on rewriting the (JS) views: - Separate rendering from rest - Solving some of those previous challenges - Unify the views (widget and data fetching) The Present: strengths and weaknesses Need to separate rendering from the rest Good excuse to start refactoring everything!

15. Strength: Code/Interface is data Can be modified dynamically The Present: strengths and weaknesses Code/Interface = data views Search views actions Menu items (custom) models (custom) fields Security rules templates reports ...

14. Strength: extreme modularity The Present: strengths and weaknesses (almost) anything can be customized in a module ● Form view ● Menus ● Business logic ● App switcher background ● Logging ● import/export ● ... Example: the new web client (enterprise) is implemented in addon web_enterprise/

9. Mid-late 2015: v9 ● New design ● Split community/enterprise ● Move toward business apps ● Large refactorings The Past: a brief history of web client early 2015: Odoo JS modules 2013--2014: assets bundle, CMS, POS (v8) 100 000 years ago: GTK app is dropped, web client evolves 500 000 years ago: GTK client + actual web client <1 million years: GTK app with python server

10. 2016: v10 ● Stabilisation, ● performance improvements, ● Onboarding, ● Odoo Studio The Past: a brief history of web client early 2015: Odoo JS modules 2013--2014: assets bundle, CMS, POS (v8) 100 000 years ago: GTK app is dropped, web client evolves 500 000 years ago: GTK client + actual web client <1 million years: GTK app with python server Mid-late 2015: new design, split community/enterprise, ... (v9)

18. Other challenges The Present: strengths and weaknesses Dead code Hard to test Difficult to optimize Api always changing Mostly undocumented Mostly untested Coupling between view and model Mobile experience not as good as it should be Cannot instantiate formview in website Some customs are hard (control panel) Fragile => lots of combinations flickering Dead css Cannot reuse form widgets ...

25. Solved challenges (maybe) The Future: new ideas and design principles Dead code Hard to test Difficult to optimize Api always changing Mostly undocumented Mostly untested Coupling between view and model Mobile experience not as good as it should be Cannot instantiate formview in website Some customs are hard (control panel) Fragile => lots of combinations flickering Dead css Cannot reuse form widgets ...

26. Roadmap (unofficial) ● Complete rewrite of views: form, list, kanban, ... ● Refactor rest of the web client (view manager/action manager / web client / session ● Rethink widget life cycle ● Unit test as much as possible ● Document core classes Some other ideas ● Use Ecmascript 2015 ● Use some virtual dom library ● Rewrite server in nodejs (*) ● Use http/2 multiplexing and handle static assets better ● ... The Future: new ideas and design principles (*) not really

8. early 2015: Odoo JS modules The Past: a brief history of web client 2013--2014: assets bundle, CMS, POS (v8) 100 000 years ago: GTK app is dropped, web client evolves 500 000 years ago: GTK client + actual web client <1 million years: GTK app with python server odoo . define ( 'web.ajax' , function ( require ) { "use strict" ; var core = require ( 'web.core' ); var utils = require ( 'web.utils' ); var time = require ( 'web.time' ); ... return {...}; });

7. 2013--2014: version 8: assets bundle, CMS, POS The Past: a brief history of web client 100 000 years ago: GTK app is dropped, web client evolves 500 000 years ago: GTK client + actual web client <1 million years: GTK app with python server <template id="web.assets_common" > <link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css" /> <link rel="stylesheet" type="text/less" href="/web/static/src/less/fonts.less" /> <link rel="stylesheet" type="text/less" href="/web/static/src/less/navbar.less" /> <script type="text/javascript" src="/web/static/lib/underscore/underscore.js" ></script> <script type="text/javascript" src="/web/static/lib/jquery/jquery.js" ></script> <script src="/web/static/lib/bootstrap/js/dropdown.js" ></script> </template>

23. New views Benefits: unit testable, no more flickering, about 40% less LOC Can be unit tested define_case ( 'form view can switch to edit mode' , function ( assert ) { var form = render_view ({ View : FormView , arch : '<form string="Partners">' + '<sheet>' + '<group>' + '<field name="f4"/>' + '</group>' + '</sheet>' + '</form>' , res_id : 14 , }); assert . equal ( form . mode , 'readonly' , 'form view should be in readonly mode' ); form . $buttons . find ( '.o_form_button_edit' ). click (); assert . equal ( form . mode , 'edit' , 'form view should be in edit mode' ); }); The Future: new ideas and design principles

Views

  • 31 Total Views
  • 2 Website Views
  • 29 Embeded Views

Actions

  • 0 Social Shares
  • 0 Likes
  • 0 Dislikes
  • 0 Comments

Share count

  • 0 Facebook
  • 0 Twitter
  • 0 LinkedIn
  • 0 Google+

Embeds 2

  • 3 onlinesync.odoo.com
  • 1 accounts.odoo.com