Anda di halaman 1dari 68

10/17/2017 The Odoo JS Framework

2017

EXPERIENCE

The Odoo JS Framework

Gery Debongnie (GED) - RD Framework Team


1 / 63
10/17/2017 The Odoo JS Framework

1 Introduction

2 Overview: JS Framework

3 New Views

4 New Testing Framework

5 Documentation/Guidelines

6 The Future

2 / 63
10/17/2017 The Odoo JS Framework

1 Introduction

What's new in v11?

3 / 63
10/17/2017 The Odoo JS Framework

Odoo JS in 2017:

4 / 63
10/17/2017 The Odoo JS Framework

Odoo JS in 2017:

We rewrote the javascript views...

5 / 63
10/17/2017 The Odoo JS Framework

“ Using SLOC to measure software


progress is like using kg for
measuring progress on aircraft
manufacturing


6 / 63
10/17/2017 The Odoo JS Framework

Odoo v11 in a nutshell (JS)

v10 v11
LOC 33.8k 32.8k
Comments 3.0k 12.5k
Tests LOC 3.9k 29.8k
Assets size (gzipped) 1042kb 909kb

7 / 63
10/17/2017 The Odoo JS Framework

Also New in v11: JS unit tests

8 / 63
10/17/2017 The Odoo JS Framework

New in v11: various


► rpc: one method to rule them all
► lazy loading support
► class for manipulating domains/context
► better code organization, primitives for concurrency programming, ...
► depreciate dataset, Model

return this._rpc({
model: 'res.partner',
method: 'create',
args: [data],
context: context,
});

9 / 63
10/17/2017 The Odoo JS Framework

and also
► more reusable widgets
► simpler code
► better communication between components
► more documentation
► coding guidelines
► ...

10 / 63
10/17/2017 The Odoo JS Framework

2 Odoo JS Framework

Yes, there's method in the madness!

11 / 63
10/17/2017 The Odoo JS Framework

Web Client Architecture

Actions Views
Business
Data
MenuItems Templates

Web UI
12 / 63
10/17/2017 The Odoo JS Framework

Component Tree
webClient

menu actionManager appSwitcher

viewManager viewManager

kanbanContr. listController formController

formRenderer formModel

fieldWidgets

13 / 63
10/17/2017 The Odoo JS Framework

Web Client Layers


actionManager
notifications viewManager
notifications notifications
webClient notifications
homeMenu

Views FieldWidgets notifications rpc

crashManager ...

Class Widget TimeUtils pyeval utils


Class

events registry Class


...

14 / 63
10/17/2017 The Odoo JS Framework

Component Communication
Before:
main bus + reference hunting

var view_id = this.__parent.view.action_manager


.current_action.controller.view_id;

15 / 63
10/17/2017 The Odoo JS Framework

Component Communication
Before:
main bus + reference hunting

var view_id = this.__parent.view.action_manager


.current_action.controller.view_id;

Now and in the future:


► try to instantiate component with what it needs
► never fish for something in parent
► moving toward event bubbling up to communicate with environment

16 / 63
10/17/2017 The Odoo JS Framework

Communication

components
call events
methods bubble up
on children

this.trigger_up('display_notification', {
title: 'Move Zig',
message: 'All your bases are belong to us',
});

17 / 63
10/17/2017 The Odoo JS Framework

3 New JS Views

18 / 63
10/17/2017 The Odoo JS Framework

“ No, I will not allow you to rewrite the


web client from scratch just for fun...


my manager
performance appraisal, 2016

19 / 63
10/17/2017 The Odoo JS Framework

New JS views
Full rewrite of JS views + 30k loc of unit tests

► Largest (framework) project in 2017

Thank you Team!!!

20 / 63
10/17/2017 The Odoo JS Framework

New JS views
Full rewrite of JS views + 30k loc of unit tests

► Largest (framework) project in 2017

Thank you Team!!!

Motivations: reduce technical debt


► separate rendering from behaviour/model
► use views in other places
► use field widgets elsewhere
► unify behaviour across views
► ...

21 / 63
10/17/2017 The Odoo JS Framework

New Views: Overall Design

Controller
View

Renderer Model

Field Widgets

22 / 63
10/17/2017 The Odoo JS Framework

Class Hierarchy

AbstractView

BasicView CalendarView GraphView PivotView

FormView ListView KanbanView

Similar hierarchy for Controllers/Renderers/Models

23 / 63
10/17/2017 The Odoo JS Framework

BasicModel: Our Browser DB


► used by List, Form and Kanban
► about 3.7k LOC

it handles data fetching, onchanges, groups of records, relational fields, sorting,


safepoints, rollbacks, modifiers, x2many command generation, ...

24 / 63
10/17/2017 The Odoo JS Framework

BasicModel: Our Browser DB


► used by List, Form and Kanban
► about 3.7k LOC

it handles data fetching, onchanges, groups of records, relational fields, sorting,


safepoints, rollbacks, modifiers, x2many command generation, ...

Here is a demo

GED + BasicModel =

25 / 63
10/17/2017 The Odoo JS Framework

Field Widgets: change example

► Widget is rendered in edit mode


FormController

FormRenderer BasicModel

FieldChar

26 / 63
10/17/2017 The Odoo JS Framework

Field Widgets: change example

► Widget is rendered in edit mode


FormController
► user edit field value in input

FormRenderer BasicModel

FieldChar

26 / 63
10/17/2017 The Odoo JS Framework

Field Widgets: change example

► Widget is rendered in edit mode


FormController
► user edit field value in input
► event is triggered, and bubble up to
renderer
FormRenderer BasicModel

FieldChar

26 / 63
10/17/2017 The Odoo JS Framework

Field Widgets: change example

► Widget is rendered in edit mode


FormController
► user edit field value in input
► event is triggered, and bubble up to
renderer
FormRenderer BasicModel
► controller notifies model, model
goes to work

FieldChar Server

26 / 63
10/17/2017 The Odoo JS Framework

Field Widgets: change example

► Widget is rendered in edit mode


FormController
► user edit field value in input
► event is triggered, and bubble up to
renderer
FormRenderer BasicModel
► controller notifies model, model
goes to work
► controller confirms changes to
FieldChar renderer

26 / 63
10/17/2017 The Odoo JS Framework

Field Widgets: change example

► Widget is rendered in edit mode


FormController
► user edit field value in input
► event is triggered, and bubble up to
renderer
FormRenderer BasicModel
► controller notifies model, model
goes to work
► controller confirm changes to
FieldChar FieldDate renderer
► renderer updates (changed) fields

26 / 63
10/17/2017 The Odoo JS Framework

Just because we can doesn't mean


we should

27 / 63
10/17/2017 The Odoo JS Framework

Views/Fields in the wild


► Views can now be instantiated anywhere
► same for fields

28 / 63
10/17/2017 The Odoo JS Framework

Proof of Concept: 128 LOC

29 / 63
10/17/2017 The Odoo JS Framework

New Testing
4 Framework

30 / 63
10/17/2017 The Odoo JS Framework

“ I don't like all these tests. That is way


too much. It will slow you down.


someone above me...

31 / 63
10/17/2017 The Odoo JS Framework

New Testing Framework


Route /web/tests

32 / 63
10/17/2017 The Odoo JS Framework

New Testing Framework


► new views were developped with TDD
► (almost) pure QUnitjs
► powerful test helpers to mock RPCs
► can test async code synchronously!

33 / 63
10/17/2017 The Odoo JS Framework

New Testing Framework


► new views were developped with TDD
► (almost) pure QUnitjs
► powerful test helpers to mock RPCs
► can test async code synchronously!

Benefits
► Executable specification
► much easier to accept PR
► much easier to refactor

34 / 63
10/17/2017 The Odoo JS Framework

Test Hero: MockServer


mock_server.js

FormController

FormRenderer BasicModel

FieldChar MockServer

Can mock: copy, create, default_get, fields_get, name_get, name_create,


name_search, onchange, read, read_group, search_count, search_read, unlink,
write, ...

35 / 63
10/17/2017 The Odoo JS Framework

QUnit.test('no html injection in char field', function (assert) {


assert.expect(1);

var form = createView({


View: FormView,
model: 'partner',
data: this.data,
arch: '<form string="Partners">' +
'<field name="foo"/>' +
'</form>',
res_id: 1,
viewOptions: { mode: 'edit' },
});

form.$('input')
.val('<script>throw Error();</script>')
.trigger('input');
form.$buttons.find('.o_form_button_save').click();
assert.strictEqual(
form.$('.o_field_widget').text(),
'<script>throw Error();</script>',
'the value should have been properly escaped'
);

form.destroy();
});

36 / 63
10/17/2017 The Odoo JS Framework

Documentation and
5 Guidelines

37 / 63
10/17/2017 The Odoo JS Framework

Documentation and
Guidelines
Bad news

Did not have time to update main documentation...

38 / 63
10/17/2017 The Odoo JS Framework

Documentation and
Guidelines
Bad news

Did not have time to update main documentation...

Good news

► finally committed to document core classes


► coding guidelines
► uptodate doc online (extracted from docstring)

39 / 63
10/17/2017 The Odoo JS Framework

Uptodate html doc


Starting in v11 => doc extracted from docstrings

40 / 63
10/17/2017 The Odoo JS Framework

Coding Guidelines

41 / 63
10/17/2017 The Odoo JS Framework

6 The Future

42 / 63
10/17/2017 The Odoo JS Framework

Current State
actionManager/viewManager/webClient/...

Views, FieldWidgets, notifications, rpc, ...

Class, Widget, utils, pyeval, registry, events, ...

43 / 63
10/17/2017 The Odoo JS Framework

Current State
actionManager/viewManager/webClient/...

Views, FieldWidgets, notifications, rpc, ...

Class, Widget, utils, pyeval, registry, events, ...

► bottom layer: mostly ok

44 / 63
10/17/2017 The Odoo JS Framework

Current State
actionManager/viewManager/webClient/...

Views, FieldWidgets, notifications, rpc, ...

Class, Widget, utils, pyeval, registry, events, ...

► bottom layer: mostly ok

► medium layer: same

45 / 63
10/17/2017 The Odoo JS Framework

Current State
actionManager/viewManager/webClient/...

Views, FieldWidgets, notifications, rpc, ...

Class, Widget, utils, pyeval, registry, events, ...

► bottom layer: mostly ok

► medium layer: same

► top layer: vastly too complex

46 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

47 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

48 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

► simplify basicmodel (+ perf improvements)

49 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

► simplify basicmodel (+ perf improvements)

► solve the field widget model extension problem

50 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

► simplify basicmodel (+ perf improvements)

► solve the field widget model extension problem

► remove dataset and other old cruft

51 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

► simplify basicmodel (+ perf improvements)

► solve the field widget model extension problem

► remove dataset and other old cruft

► allow EcmaScript 2015

52 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

► simplify basicmodel (+ perf improvements)

► solve the field widget model extension problem

► remove dataset and other old cruft

► allow EcmaScript 2015

► improve error handling (logging/catching errors/recovery)

53 / 63
10/17/2017 The Odoo JS Framework

High priority
► massive simplification of top layer
► high quality developer documentation (JS)

Medium priority
► add didMount and willUnmount to Widget (remove do_show)

► simplify basicmodel (+ perf improvements)

► solve the field widget model extension problem

► remove dataset and other old cruft

► allow EcmaScript 2015

► improve error handling (logging/catching errors/recovery)

► ...

54 / 63
10/17/2017 The Odoo JS Framework

What makes a good framework?

55 / 63
10/17/2017 The Odoo JS Framework

What makes a good framework?

expressivity

56 / 63
10/17/2017 The Odoo JS Framework

What makes a good framework?

expressivity

easy to understand

57 / 63
10/17/2017 The Odoo JS Framework

What makes a good framework?


one obvious solutions for most problems

expressivity

easy to understand

58 / 63
10/17/2017 The Odoo JS Framework

API stability

What makes a good framework?


one obvious solutions for most problems

expressivity

easy to understand

59 / 63
10/17/2017 The Odoo JS Framework

API stability

What makes a good framework?


one obvious solutions for most problems

expressivity
consistency

easy to understand

60 / 63
10/17/2017 The Odoo JS Framework

API stability

What makes a good framework?


one obvious solutions for most problems

expressivity
consistency

easy to understand

Odoo v11 is much better!!!


61 / 63
10/17/2017 The Odoo JS Framework

Thank you for your attention...

62 / 63
10/17/2017 The Odoo JS Framework

Views: challenges/unsolved
problems
► Field widget which needs to integrate with BasicModel
► Bad API when using field widgets standalone
► Optimizing RPCs/commands

63 / 63