From de22438a8a0a0a8cb031dacfd981be40b95b67ea Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Tue, 25 Nov 2014 13:52:27 +0100 Subject: [PATCH 1/4] VanillaJS support added - Transferring Props Added a way to use helper methods to make transferring props down easier now. --- 01 - Core/08 - Transferring Props.js | 60 +++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/01 - Core/08 - Transferring Props.js b/01 - Core/08 - Transferring Props.js index 9b56475..41616b1 100644 --- a/01 - Core/08 - Transferring Props.js +++ b/01 - Core/08 - Transferring Props.js @@ -78,4 +78,62 @@ class App { return
{fancyButton}
; } -} \ No newline at end of file +} + + +// Vanilla JS: +// While rest and spread operators are being waited on (https://gist.github.com/sebmarkbage/aa849c7973cb4452c547) +// And while we wait on shims, simple helper methods and array destructuring can be used: + +class FancyButton { + + static defaultProps = { + color: 'blue' + }; + + props: { + color: string, + width: number, + height: number, + ...HTMLPropTypes + }, + + // This uses rest and spread operators + // https://gist.github.com/sebmarkbage/aa849c7973cb4452c547 + + render(props, state) { + + var [{color}, {className}, {style}, {width}, {height}, ...other] = arryFromProps(props); + + var button = React.DOM.button( + propsFromArray([ + ...other, + ['className', joinClasses(className, 'FancyButton')], + ['padding', 10], + ['width', width - 10], + ['height', height - 10] + ]) + ); + + return button; + } + +} + +// further a mixin could be used to do arrayFromProps automatically. + +// Implementations of Helper Methods. +function arrayFromProps(props){ + var array = []; + // this uses the for-of loop, but it could easily be implemented otherwise. + for ([key, value] of props) { + array.push([key, value]); + } + return array; +} + +function propsFromArray(array){ + return array.reduce((obj, prop) => { + obj[prop[0]] = obj[1]; + }, {}) +} From 56ab72e4dee76ff6a3bc83d82e68379079691356 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Tue, 25 Nov 2014 13:54:43 +0100 Subject: [PATCH 2/4] Consistent with changes in Core the render method now gets props passed to it. --- 04 - Layout/01 - Primitives.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/04 - Layout/01 - Primitives.js b/04 - Layout/01 - Primitives.js index 963c756..102bb0a 100644 --- a/04 - Layout/01 - Primitives.js +++ b/04 - Layout/01 - Primitives.js @@ -13,8 +13,8 @@ class Fragment { // Position its content with an offset of `x` and `y` class Positioner { - render() { - var { x, y, children } = this.props; + render(props) { + var { x, y, children } = props; return (
{children} @@ -25,8 +25,8 @@ class Positioner { // Paint a box with size `width` and `height` class Box { - render() { - var { width, height } = this.props; + render(props) { + var { width, height } = props; return (
{children} From 62e51d0c962fb71969d4819957c22c69c97fb017 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Tue, 25 Nov 2014 14:11:21 +0100 Subject: [PATCH 3/4] Mention upcoming changes to the Web --- 04 - Layout/02 - Layout Components.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/04 - Layout/02 - Layout Components.js b/04 - Layout/02 - Layout Components.js index aad2920..fdeb254 100644 --- a/04 - Layout/02 - Layout Components.js +++ b/04 - Layout/02 - Layout Components.js @@ -68,5 +68,8 @@ class VerticalListItem { return { layoutHeight: this.props.height }; + + // Chrome is trying deliver an API to measure the size Nodes, + // by rendering them outside the DOM, that should be kept in mind here. } } From 967f2e2e700ef7362e80e95a413854e6047c82f1 Mon Sep 17 00:00:00 2001 From: Naman Goel Date: Tue, 25 Nov 2014 14:23:46 +0100 Subject: [PATCH 4/4] Section about drawbacks of this approach --- 04 - Layout/04 - Inline Styles.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/04 - Layout/04 - Inline Styles.md b/04 - Layout/04 - Inline Styles.md index 6a36627..84a3bfb 100644 --- a/04 - Layout/04 - Inline Styles.md +++ b/04 - Layout/04 - Inline Styles.md @@ -95,3 +95,19 @@ var List = React.createClass({ ``` + +## Drawbacks + +This approach will generally result in much better rendering performance, as it removes stylesheet complexity. However it does have a few shortcomings/challenges. + +There are many CSS properties that simply cannot be applied with inline styles. This includes all pseudo selectors (:hover, :focus, :active, etc) as well as pseudo-elements. + +Various states, like :hover, :focus can be worked around with javascript event handlers. This has the downside of relying on javascript. + +Other pseudo selectors, such as, :first-child, nth-child, etc, can be easily accounted for with javascript and actually helps with a better API. + +Pseudo elements (such as ::before, ::after) are simply impossible to achieve with inline-styles, but at the same time, strictly speaking, it should always be possible to replace them with real elements. The downside here, is that we may lose the semantic structure of the DOM because of this. + +To summarize, the major drawbacks are +— Dependence on JS for :hover, :active etc. +- Losing the semantic benefits of Pseudo elements by using real elements