Odoo JS Framework Rewrite Brings New Views and Testing

10/17/2017 The Odoo JS Framework
2017
EXPERIENCE
The Odoo JS Framework
Gery Debongnie (GED) - RD Framework Team

1 / 63
1 Introduction
2 Overview: JS Framework
3 New Views
4 New Testing Framework
5 Documentation/Guidelines
6 The Future
2 / 63
1 Introduction
What's new in v11?
3 / 63
Odoo JS in 2017:
4 / 63
Odoo JS in 2017:
We rewrote the javascript views...
5 / 63
“ Using SLOC to measure software

progress is like using kg for
measuring progress on aircraft
manufacturing
”
6 / 63
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
Also New in v11: JS unit tests
8 / 63
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
and also
► more reusable widgets
► simpler code
► better communication between components
► more documentation
► coding guidelines
► ...
10 / 63
2 Odoo JS Framework
Yes, there's method in the madness!
11 / 63
Web Client Architecture
Actions Views
Business
Data
MenuItems Templates
Web UI
12 / 63
Component Tree
webClient
menu actionManager appSwitcher
viewManager viewManager
kanbanContr. listController formController
formRenderer formModel
fieldWidgets
13 / 63
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
Component Communication
Before:
main bus + reference hunting
var view_id = this.__parent.view.action_manager

.current_action.controller.view_id;
15 / 63
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
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
3 New JS Views
18 / 63
“ No, I will not allow you to rewrite the

web client from scratch just for fun...
”
my manager
performance appraisal, 2016
19 / 63
New JS views
Full rewrite of JS views + 30k loc of unit tests
► Largest (framework) project in 2017
Thank you Team!!!
20 / 63
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
New Views: Overall Design
Controller
View
Renderer Model
Field Widgets
22 / 63
Class Hierarchy
AbstractView
BasicView CalendarView GraphView PivotView
FormView ListView KanbanView
Similar hierarchy for Controllers/Renderers/Models
23 / 63
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
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
Field Widgets: change example
► Widget is rendered in edit mode

FormController
FormRenderer BasicModel
FieldChar
26 / 63

FormController
► user edit field value in input
FieldChar
26 / 63

FormController
► event is triggered, and bubble up to
renderer
FieldChar
26 / 63

FormController
renderer
► controller notifies model, model
goes to work
FieldChar Server
26 / 63

FormController
renderer
goes to work
► controller confirms changes to
FieldChar renderer
26 / 63

FormController
renderer
goes to work
► controller confirm changes to
FieldChar FieldDate renderer
► renderer updates (changed) fields
26 / 63
Just because we can doesn't mean

we should
27 / 63
Views/Fields in the wild

► Views can now be instantiated anywhere
► same for fields
28 / 63
Proof of Concept: 128 LOC
29 / 63
New Testing
4 Framework
30 / 63
“ I don't like all these tests. That is way

too much. It will slow you down.
”
someone above me...
31 / 63
New Testing Framework

Route /web/tests
32 / 63

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

► 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
Test Hero: MockServer

mock_server.js
FormController
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
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
Documentation and
5 Guidelines
37 / 63
Documentation and
Guidelines
Bad news
Did not have time to update main documentation...
38 / 63
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
Uptodate html doc

Starting in v11 => doc extracted from docstrings
40 / 63
Coding Guidelines
41 / 63
6 The Future
42 / 63
Current State
actionManager/viewManager/webClient/...
Views, FieldWidgets, notifications, rpc, ...
Class, Widget, utils, pyeval, registry, events, ...
43 / 63
Current State
► bottom layer: mostly ok
44 / 63
Current State
► medium layer: same
45 / 63
Current State
► medium layer: same
► top layer: vastly too complex
46 / 63
High priority
► massive simplification of top layer
► high quality developer documentation (JS)
47 / 63
High priority
Medium priority
► add didMount and willUnmount to Widget (remove do_show)
48 / 63
High priority
Medium priority
► simplify basicmodel (+ perf improvements)
49 / 63
High priority
Medium priority
► solve the field widget model extension problem
50 / 63
High priority
Medium priority
► remove dataset and other old cruft
51 / 63
High priority
Medium priority
► allow EcmaScript 2015
52 / 63
High priority
Medium priority
► improve error handling (logging/catching errors/recovery)
53 / 63
High priority
Medium priority
► improve error handling (logging/catching errors/recovery)
► ...
54 / 63
What makes a good framework?
55 / 63
expressivity
56 / 63
expressivity
easy to understand
57 / 63

one obvious solutions for most problems
expressivity
easy to understand
58 / 63
API stability

expressivity
easy to understand
59 / 63
API stability

expressivity
consistency
easy to understand
60 / 63
API stability

expressivity
consistency
easy to understand
Odoo v11 is much better!!!

61 / 63
Thank you for your attention...
62 / 63
Views: challenges/unsolved
problems
► Field widget which needs to integrate with BasicModel
► Bad API when using field widgets standalone
► Optimizing RPCs/commands
63 / 63

Odoo JS Framework Rewrite Brings New Views and Testing

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Odoo JS Framework Rewrite Brings New Views and Testing

Uploaded by

Copyright:

Available Formats

10/17/2017 The Odoo JS Framework

The Odoo JS Framework

Gery Debongnie (GED) - RD Framework Team

4 New Testing Framework

What's new in v11?

We rewrote the javascript views...

“ Using SLOC to measure software

Odoo v11 in a nutshell (JS)

Also New in v11: JS unit tests

New in v11: various

Yes, there's method in the madness!

Web Client Architecture

menu actionManager appSwitcher

kanbanContr. listController formController

Web Client Layers

Views FieldWidgets notiﬁcations rpc

Class Widget TimeUtils pyeval utils

events registry Class

var view_id = this.__parent.view.action_manager

var view_id = this.__parent.view.action_manager

Now and in the future:

“ No, I will not allow you to rewrite the

► Largest (framework) project in 2017

Thank you Team!!!

► Largest (framework) project in 2017

Thank you Team!!!

Motivations: reduce technical debt

New Views: Overall Design

BasicView CalendarView GraphView PivotView

FormView ListView KanbanView

Similar hierarchy for Controllers/Renderers/Models

BasicModel: Our Browser DB

it handles data fetching, onchanges, groups of records, relational ﬁelds, sorting,

BasicModel: Our Browser DB

it handles data fetching, onchanges, groups of records, relational ﬁelds, sorting,

Field Widgets: change example

► Widget is rendered in edit mode

Field Widgets: change example

► Widget is rendered in edit mode

Field Widgets: change example

► Widget is rendered in edit mode

Field Widgets: change example

► Widget is rendered in edit mode

Field Widgets: change example

► Widget is rendered in edit mode

Field Widgets: change example

► Widget is rendered in edit mode

Just because we can doesn't mean

Views/Fields in the wild

Proof of Concept: 128 LOC

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

New Testing Framework

New Testing Framework

New Testing Framework

Test Hero: MockServer

Can mock: copy, create, default_get, ﬁelds_get, name_get, name_create,

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

var form = createView({

Did not have time to update main documentation...

Did not have time to update main documentation...

► ﬁnally committed to document core classes

Uptodate html doc

Views, FieldWidgets, notiﬁcations, rpc, ...