The Odoo JS Framework

Odoo Experience 2018 / Developers

214 views
0 Likes
0 0

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

6.

45.

46.

2. Introduction

9.

24.

26.

27.

28.

41. Future works...

7. Shiny New Features

13. — Fabien P.

18. Views

34. — Fabien P.

3.

23. https://www.odoo.com/documentation/master/reference/views.html#activity

11. ES6 (someday)

12. Pro-tip: press Alt+F4 to change the background color in Odoo

4. ● more stable/solid

47. ● reduce coupling between components

42. 1. code ecosystem is increasingly complex

5. ● more stable/solid ● mature, can get things done

14. ● rewrite Discuss

56. #odooexperience 2018 EXPERIENCE 2018

1. • RD Framework JS Team Odoo, JS, web and related stuff EXPERIENCE 2018

57. #odooexperience 2018 EXPERIENCE 2018

10. from phantomJS to Chrome headless

43. 1. code ecosystem is increasingly complex 2. Odoo ecosystem is growing

25. ● comparison across time ● date filters: dynamic, easier groupby

48. ● reduce coupling between components ● css tied to widget (instead of a generic css file)

49. ● reduce coupling between components ● css tied to widget (instead of a generic css file) ● better abstractions

15. ● rewrite Discuss ● rewrite ActionManager, remove ViewManager

52. 1. lighter, closer to the frontend ecosystem 2. safer/clearer extensibility 3. better composability

8. ● Also: less to sass ● future proofing

19. ● better UI for grouped list view ● sorting one2many across all pages ● ...

22. ● subviews ● aggregates ● formulas https://www.odoo.com/documentation/master/reference/views.html#dashboard

35. Web tests: /web/tests ● Qunit tests (pure JS, mostly 'unit') ● tours (integration tests) www.odoo.com/documentation/master/reference/testing.html

44. 1. code ecosystem is increasingly complex 2. Odoo ecosystem is growing 3. JS ecosystem is exploding

32. ● Do not depend on your parent... ● Separate public/private/handlers ● Document your code ● Test your component

16. ● rewrite Discuss ● rewrite ActionManager, remove ViewManager ● AbstractAction ● ...

20. <tree banner_route = "..." > <...> </tree> https://www.odoo.com/documentation/12.0/reference/views.html#common-structure

50. ● reduce coupling between components ● css tied to widget (instead of a generic css file) ● better abstractions ● better documentation ● keep a changelog (for breaking change in code)

17. ● JS Reference ● JS Cheatsheet ● Documentation for master ● Better inline docstrings https://www.odoo.com/documentation/12.0/

53. ● use more native API/JS (promises, ES6 classes, fetch, ...) ● streamline external libraries ● lazy load some code ● improve/rethink assets management

31. Upstream: events (bubbling up) parent widget sub widget Downstream: - constructor (props) - method call Last resort: events on a bus (to avoid if possible) other sub widget

29. ● a SPA (single page application) ● made with our custom framework ● uses QWeb as template engine ● extensible ● 35k/45k lines of JS code/tests Code: addons/web/static/src URL: /web/

36. use it! (create a widget and register it) monkey patch! (use the .include method of Class) yes no is there an existing mechanism? (ex: a registry) GOOD :) NOT AS GOOD :(

54. replace monkey patching by proper mechanisms: ● magic ● API hooks ● registries ● plugins ● ... more testable safer, more resilient to change

55. <div t-name= "HomeMenu" class= "o_home_menu" > <Sidebar t-expr-mode= "mode" /> <div> <span t-on-click= "_openMenu" > some content </span> </div> </div>

51. ● reduce coupling between components ● css tied to widget (instead of a generic css file) ● better abstractions ● better documentation ● keep a changelog (for breaking change in code) ● mark code as deprecated and keep it for one major version ● better process to ease (code) migrations ● ...

30. web client action manager kanban controller form controller home menu kanban renderer kanban model form renderer form model field widgets ... navbar systray

21. <cohort string = "Subscription" date_start = "date_start" date_stop = "date_end" interval = "month" /> https://www.odoo.com/documentation/master/reference/views.html#cohort

39. For example: display a welcome message in home menu ● create a new file, add it to the assets bundle ● monkey patch proper component var HomeMenu = require ( 'web_enterprise.HomeMenu ); HomeMenu . include ({ render : function () { this . _super (); // do something else here... }, });

37. ● create a new file, add it to the assets bundle ● implement custom widget by extending correct field ● register it to the field registry ● use it in your form view var CustomWidget = FloatField .extend ({ _render : function () { // some custom override }, }); fieldRegistry .add ( 'mywidget' , CustomWidget ); <field name= "somefield" widget= "mywidget" />

40. ● implement your custom screen ● register it (in JS) to the registry ● register it (in DB) ● add a menu item var AbstractAction = require ( 'web.AbstractAction' ); var ClientAction = AbstractAction . extend ({ ... }); core . action_registry . add ( 'my-custom-action' , ClientAction ); <record id= "my_action" model= "ir.actions.client" > <field name= "name" > Some Name </field> <field name= "tag" > my-custom-action </field> </record> <menuitem id= "my_menu_item" parent= "some_parent" action= "my-custom-action" name= "Title" />

38. ● create a new file, add it to the assets bundle ● implement behaviour by monkey patching correct field ● no need to register it! basicFields . FieldPhone . include ({ events : _ . extend ({}, Phone . prototype . events , { click : '_onClick' , }), _onClick : function ( e ) { if ( this . mode === 'readonly' ) { e . preventDefault (); var phoneNumber = this . value ; // call the number on voip... } }, });

33. var MyCounter = Widget .extend ({ events: { click: '_onClick' }, init : function ( parent , value ) { this ._super ( parent ); this .value = value ; }, start : function () { this ._render (); }, //------------------------------- // Public //------------------------------- increment : function () { this .value ++ ; this ._render (); }, //------------------------------- // Private //------------------------------- _render : function () { this . $el .html ( $ ( '<span>' ) .text ( this .value) ); }, //------------------------------- // Handlers //------------------------------- _onClick : function () { this .increment (); }, });

Views

  • 214 Total Views
  • 0 Website Views
  • 214 Embedded Views

Actions

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

Share count

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