From dfa638d56b28b76f1221b9e939e9c8a9fd571a6b Mon Sep 17 00:00:00 2001 From: ninabreznik Date: Sat, 5 Aug 2017 19:22:33 +0100 Subject: [PATCH 1/6] Add best-practices.md --- best-practices.md | 126 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 best-practices.md diff --git a/best-practices.md b/best-practices.md new file mode 100644 index 0000000000..4ac3a22971 --- /dev/null +++ b/best-practices.md @@ -0,0 +1,126 @@ +# Current "Best Practice" Conventions +* look them up +* discuss them +* update them + +## Module Definition (example) +```js +// user-card.js +var yo = require('yo-yo') +var csjs = require('csjs-inject') +var EventManager = require('ethereum-remix').lib.EventManager + +var css = csjs` + .userCard { + position : relative; + box-sizing : border-box; + display : flex; + flex-direction : column; + align-items : center; + border : 1px solid black; + width : 400px; + padding : 50px; + } + .clearFunds { background-color: lightblue; } +` + +class UserCard { + constructor (opts = {}) { + var self = this + + self.event = new EventManager() + self._api = opts.api + self._view = undefined + self.data = { + title: opts.title, + name: opts.name, + surname: opts.surname, + totalSpend: 0, + _nickname: opts.nickname, + _funds: self._appAPI.getUserFunds() + } + var events = opts.events + + events.funds.register('fundsChanged', function (amount) { + if (amount < self.data._funds) self.data.totalSpend += self.data._funds - amount + self.data._funds = amount + self.render() + }) + } + render () { + var self = this + var el = yo` +
+

@${self.data._nickname}

+

Welcome, ${self.data.title || ''} ${self.data.name || 'anonymous'} ${self.data.surname}

+ + + +
+ ` + if (self._view) yo.update(self._view, el) + else self._view = el + return self._view + } + update (data = {}) { + var self = this + if (!self._view) self._constraint('first initialize view by calling `.render()`') + if (data.hasOwnProperty('title')) self.data.title = data.title + if (data.hasOwnProperty('name')) self.data.name = data.name + if (data.hasOwnProperty('surname')) self.data.surname = data.surname + self.render() + } + getNickname () { + var self = this + return `@${self.data._nickname}` + } + getFullName () { + var self = this + return `${self.data.title} ${self.data.name} ${self.data.surname}` + } + _spendAll (event) { + var self = this + self._appAPI.clearUserFunds() + } + _constraint (msg) { throw new Error(msg) } +} + +module.exports = UserCard +``` +## Module Usage (example) +```js +/*****************************************************************************/ +// 1. SETUP CONTEXT +var EventManager = require('ethereum-remix').lib.EventManager +var funds = { event: new EventManager() } +var userfunds = 15 +function getUserFunds () { return userfunds } +function clearUserFunds () { + var spent = userfunds + userfunds = 0 + console.log(`all funds of ${usercard.getFullName()} were spent.`) + funds.event.trigger('fundsChanged', [userfunds]) + return spent +} +setInterval(function () { + userfunds++ + funds.event.trigger('fundsChanged', [userfunds]) +}, 100) + +/*****************************************************************************/ +// 2. EXAMPLE USAGE +var UserCard = require('./user-card') + +var usercard = new UserCard({ + api: { getUserFunds, clearUserFunds }, + events: { funds: funds.event }, + title: 'Dr.', + name: 'John', + surname: 'Doe', + nickname: 'johndoe99' +}) + +var el = usercard.render() +document.body.appendChild(el) +setTimeout(function () { usercard.update({ title: 'Prof.' }) }, 5000) +``` From f4f46ea5d6effe50026849a2c8b886032d6f0ba9 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 9 Aug 2017 09:06:55 +0200 Subject: [PATCH 2/6] update --- best-practices.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/best-practices.md b/best-practices.md index 4ac3a22971..fb2ff94f34 100644 --- a/best-practices.md +++ b/best-practices.md @@ -3,6 +3,28 @@ * discuss them * update them +- `ES6 class` rather than ES5 to create class. +- CSS declaration using `csjs-inject`. +- HTML declaration using `yo-yo`. +- A module trigger events using `event` property: +  `self.event = new EventManager()` . Events can then be triggered: +  `self.event.trigger('eventName', [param1, param2])` +- `opt` is an input parameter: + +  ``` +  { + api: { .. list of function needed by the module .. }, + events: { .. list of event manager the module will listen on .. } + } +  ``` +   +- `self._api = opts.api` `opts.api` is an object which contains functions/features that the module needs. +- `self._view` is the HTML view renderered by `yo-yo` in the `render` function +- `render()` this function should be called: + At the first rendering (make sure that the returned node element is put on the DOM), + When some property has changed in order to update the view +     +     ## Module Definition (example) ```js // user-card.js @@ -37,7 +59,7 @@ class UserCard { surname: opts.surname, totalSpend: 0, _nickname: opts.nickname, - _funds: self._appAPI.getUserFunds() + _funds: self._api.getUserFunds() } var events = opts.events @@ -46,6 +68,7 @@ class UserCard { self.data._funds = amount self.render() }) + self.event.trigger('eventName', [param1, param2]) } render () { var self = this From 469068be9c081ade63e3efcc899e923f7a9278ce Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 9 Aug 2017 09:16:42 +0200 Subject: [PATCH 3/6] update --- best-practices.md | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/best-practices.md b/best-practices.md index fb2ff94f34..325927ee45 100644 --- a/best-practices.md +++ b/best-practices.md @@ -1,29 +1,23 @@ # Current "Best Practice" Conventions -* look them up -* discuss them -* update them - `ES6 class` rather than ES5 to create class. - CSS declaration using `csjs-inject`. - HTML declaration using `yo-yo`. +- `opt` is an input parameter, it contains the `api` and `event` object. +- `self._api = opts.api` `opts.api` is an object which contains functions/features that the module needs. +- `opts.events` contains events manager the module will listen on. - A module trigger events using `event` property:  `self.event = new EventManager()` . Events can then be triggered:  `self.event.trigger('eventName', [param1, param2])` -- `opt` is an input parameter: -  ``` -  { - api: { .. list of function needed by the module .. }, - events: { .. list of event manager the module will listen on .. } - } -  ``` -   -- `self._api = opts.api` `opts.api` is an object which contains functions/features that the module needs. - `self._view` is the HTML view renderered by `yo-yo` in the `render` function - `render()` this function should be called: - At the first rendering (make sure that the returned node element is put on the DOM), - When some property has changed in order to update the view -     + + * At the first rendering (make sure that the returned node element is put on the DOM), + + * When some property has changed in order to update the view + +- look them up, discuss them, update them     ## Module Definition (example) ```js From 2da388f9c5b9e0041a88ca1e56dc71b95b2ec0ab Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 9 Aug 2017 09:38:43 +0200 Subject: [PATCH 4/6] update best practice --- best-practices.md | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/best-practices.md b/best-practices.md index 325927ee45..e3410231bd 100644 --- a/best-practices.md +++ b/best-practices.md @@ -9,15 +9,16 @@ - A module trigger events using `event` property:  `self.event = new EventManager()` . Events can then be triggered:  `self.event.trigger('eventName', [param1, param2])` - -- `self._view` is the HTML view renderered by `yo-yo` in the `render` function +- `self._view` is the HTML view renderered by `yo-yo` in the `render` function. - `render()` this function should be called: - * At the first rendering (make sure that the returned node element is put on the DOM), - - * When some property has changed in order to update the view + * At the first rendering (make sure that the returned node element is put on the DOM). -- look them up, discuss them, update them + * When some property has changed in order to update the view. +- `self.state` contains state properties of the module. These properties are either given from the parent through `òpts` or   computed during the life of the object. +- `update(state)` allow the parent to update some of the state properties. +- for all functions / properties, prefixing by underscore (`_`) means the scope is private. +- look them up, discuss them, update them.     ## Module Definition (example) ```js @@ -47,7 +48,7 @@ class UserCard { self.event = new EventManager() self._api = opts.api self._view = undefined - self.data = { + self.state = { title: opts.title, name: opts.name, surname: opts.surname, @@ -58,8 +59,8 @@ class UserCard { var events = opts.events events.funds.register('fundsChanged', function (amount) { - if (amount < self.data._funds) self.data.totalSpend += self.data._funds - amount - self.data._funds = amount + if (amount < self.state._funds) self.state.totalSpend += self.state._funds - amount + self.state._funds = amount self.render() }) self.event.trigger('eventName', [param1, param2]) @@ -68,10 +69,10 @@ class UserCard { var self = this var el = yo`
-

@${self.data._nickname}

-

Welcome, ${self.data.title || ''} ${self.data.name || 'anonymous'} ${self.data.surname}

-
  • User Funds: $${self.data._funds}
-
  • Spent Funds: $${self.data.totalSpend}
+

@${self.state._nickname}

+

Welcome, ${self.state.title || ''} ${self.state.name || 'anonymous'} ${self.state.surname}

+
  • User Funds: $${self.state._funds}
+
  • Spent Funds: $${self.state.totalSpend}
` @@ -79,21 +80,21 @@ class UserCard { else self._view = el return self._view } - update (data = {}) { + update (state = {}) { var self = this if (!self._view) self._constraint('first initialize view by calling `.render()`') - if (data.hasOwnProperty('title')) self.data.title = data.title - if (data.hasOwnProperty('name')) self.data.name = data.name - if (data.hasOwnProperty('surname')) self.data.surname = data.surname + if (state.hasOwnProperty('title')) self.state.title = state.title + if (state.hasOwnProperty('name')) self.state.name = state.name + if (state.hasOwnProperty('surname')) self.state.surname = state.surname self.render() } getNickname () { var self = this - return `@${self.data._nickname}` + return `@${self.state._nickname}` } getFullName () { var self = this - return `${self.data.title} ${self.data.name} ${self.data.surname}` + return `${self.state.title} ${self.state.name} ${self.state.surname}` } _spendAll (event) { var self = this From e789fac8a4d614f45c3eb03f9226b3d88144c8cf Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 9 Aug 2017 09:40:28 +0200 Subject: [PATCH 5/6] Update best-practices.md --- best-practices.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/best-practices.md b/best-practices.md index e3410231bd..14b4de271e 100644 --- a/best-practices.md +++ b/best-practices.md @@ -7,7 +7,8 @@ - `self._api = opts.api` `opts.api` is an object which contains functions/features that the module needs. - `opts.events` contains events manager the module will listen on. - A module trigger events using `event` property: -  `self.event = new EventManager()` . Events can then be triggered: +  `self.event = new EventManager()`. + Events can then be triggered:  `self.event.trigger('eventName', [param1, param2])` - `self._view` is the HTML view renderered by `yo-yo` in the `render` function. - `render()` this function should be called: From 3b58e5bb3f4cb24ae222189e83d7f435035005a4 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 9 Aug 2017 09:42:33 +0200 Subject: [PATCH 6/6] Update best-practices.md --- best-practices.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices.md b/best-practices.md index 14b4de271e..24b5805d5d 100644 --- a/best-practices.md +++ b/best-practices.md @@ -17,7 +17,7 @@ * When some property has changed in order to update the view. - `self.state` contains state properties of the module. These properties are either given from the parent through `òpts` or   computed during the life of the object. -- `update(state)` allow the parent to update some of the state properties. +- `update(state)` allow the parent to easily update some of the state properties. - for all functions / properties, prefixing by underscore (`_`) means the scope is private. - look them up, discuss them, update them.