Future-Proofing Your JavaScript Framework Decision

FUTURE-PROOFING
YOUR JAVASCRIPT
FRAMEWORK
DECISIONApril 5, 2019
JOHN RIVIELLO
@JohnRiv

GOAL:
Position your team so
the eventual transition
off the framework will
involve the least
amount of friction

Future-Proofing Your JavaScript Framework Decision - @JohnRiv4
“BEACH SAND” BY JOSH SORENSON LICENSED BY PEXELS.COM

“SACRIFICIAL ARCHITECTURE”
https://martinfowler.com/bliki/SacrificialArchitecture.html
“Thinking now about
things that can make it
easier to replace when
the time comes.”
- MARTIN FOWLER

1.REDUX
2.PERPETUAL CSS
3.DEMO PAGES
4.A FRAMEWORK FOR
CHOOSING YOUR FRAMEWORK
PATTERNS & TOOLS

UNIDIRECTIONAL
DATA FLOWhttps://redux.js.org/basics/data-flow

PREDICTABLE
STATE MUTATIONShttps://redux.js.org/introduction/motivation

Future-Proofing Your JavaScript Framework Decision - @JohnRiv1 0

{
type: 'OPEN_MODAL',
payload: {
type: 'PAUSE_PERSON'
id: 'ABC1234',
}
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}
log('OPEN_MODAL', 
'PAUSE_PERSON', 
'ABC1234');

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}
{
…
modal: {
isOpen: false,
}
…
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}
{
…
modal: {
isOpen: true,
type: 'PAUSE_PERSON',
}
…
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}
{
viewState: {
modal: {
isOpen: true,
displayName: 'Max',
}
}
…
}

{
type: 'OPEN_MODAL',
payload: {
id: 'ABC1234',
}
}

{
type: 'MODAL_SUBMIT',
payload: { … }
}

{
payload: { … }
}

{
payload: { … }
}
POST /pause/ABC1234

{
payload: { … }
}
log('MODAL_SUBMIT', 
'PAUSE_PERSON', 
'ABC1234');

{
payload: { … }
}

{
payload: { … }
}
{
…
modal: {
isOpen: true,
type: 'PAUSE_PERSON', 
status: 'READY',
}
…
}

{
payload: { … }
}
{
…
modal: {
isOpen: true,
status: 'BUSY',
}
…
}

{
payload: { … }
}

{
payload: { … }
}
{
viewState: {
modal: {
isOpen: true,
status: 'BUSY',
}
}
…
}

{
payload: { … }
}

POST /pause/ABC1234
200 OK
{ … data … }

POST /pause/ABC1234
200 OK
{ … data … }
log('MODAL_SUCCESS', 
'PAUSE_PERSON', 
'ABC1234');

POST /pause/ABC1234
200 OK
{ … data … }

POST /pause/ABC1234
200 OK
{ … data … }
{
…
modal: {
isOpen: true,
status: 'BUSY',
}
…
}

POST /pause/ABC1234
200 OK
{ … data … }
{
…
modal: {
isOpen: true,
status: 'SUCCESS',
}
…
}

POST /pause/ABC1234
200 OK
{ … data … }

POST /pause/ABC1234
200 OK
{ … data … }
{
viewState: {
modal: {
isOpen: true,
status: 'SUCCESS',
}
}
…
}

POST /pause/ABC1234
200 OK
{ … data … }

client-core
src/
actions/
constants/
data/
epics/
helpers/
middleware/
reducers/
selectors/
store/
index.js
dist/
es5-client-core.js

Future-Proofing Your JavaScript Framework Decision - @JohnRiv
src/
actions/
constants/
data/
epics/
helpers/
middleware/
reducers/
selectors/
store/
index.js
dist/
es5-client-core.js
9 8
client-core
src/actions/index.js
export { default as account } from './account';
export { default as app } from './app';
...
account.js
app.js
…
index.js
…
src/actions/account.js
export function functionOne({
...
return {
/* object */
};
}
export function functionTwo({
...
return {
/* object */
};
}
...
export default {
functionOne,
functionTwo,
...
};

client-core
src/
actions/
constants/
data/
epics/
helpers/
middleware/
reducers/
selectors/
store/
index.js
dist/
es5-client-core.js
index.js
import * as _actions from './src/actions';
import * as _constants from './src/constants';
import * as _data from './src/data';
import * as _epics from './src/epics';
import * as _helpers from './src/helpers';
import * as _middleware from './src/middleware';
import * as _reducer from './src/reducers';
import * as _selectors from './src/selectors';
import * as _store from './src/store';
export const actions = _actions;
export const constants = _constants;
export const data = _data;
export const epics = _epics;
export const helpers = _helpers;
export const middleware = _middleware;
export const reducers = _reducer;
export const selectors = _selectors;
export const store = _store;
...
...
return {
/* object */
};
}
...
return {
/* object */
};
}
...
export default {
functionOne,

...
return {
/* object */
};
}
...
return {
/* object */
};
}
...
export default {
functionOne,
1 0 0
client-core
src/
actions/
constants/
data/
epics/
helpers/
middleware/
reducers/
selectors/
store/
index.js
dist/
es5-client-core.js
index.js
...
import clientCore from 'client-core'
import {actions as coreActions} from 'client-core'
import {account as accountActions} from 'client-core/actions'
import {functionOne as f1} from 'client-core/actions/account'
Allows for multiple ways to import the code

...
return {
/* object */
};
}
...
return {
/* object */
};
}
...
export default {
functionOne,
src/
actions/
constants/
data/
epics/
helpers/
middleware/
reducers/
selectors/
store/
index.js
dist/
es5-client-core.js
1 0 1
client-core
index.js
export { default as app } from ‘./app';
...
import clientCore from 'client-core'
import {actions as coreActions} from 'client-core'
import {account as accountActions} from 'client-core/actions'
import {functionOne as f1} from 'client-core/actions/account'
Allows for multiple ways to import the code
= UMD Module+

Future-Proofing Your JavaScript Framework Decision - @JohnRiv1 0 2
YOU MIGHT NOT
NEED REDUX
¯_ _/¯

git clone --depth 1 -b template-no-redux —single-branch
https://github.com/Polymer/pwa-starter-kit my-app
https://pwa-starter-kit.polymer-project.org/
NO-REDUX TEMPLATE:
git clone --depth 1 -b template-no-redux —single-branch
https://github.com/Polymer/pwa-starter-kit my-app

CSS: SO MANY OPTIONS
COMPONENT-SPECIFIC
•CSS-in-JS
•Shadow DOM
REUSABLE CLASSES
•OOCSS
•SMACSS
•BEM
THEMING WITH VARIABLES
•Sass / Less / Stylus
•Post CSS
•CSS Custom Properties
•CSS Shadow Parts
UTILITY CLASSES /
FUNCTIONAL CSS / ATOMIC CSS
•Atomizer
•Tachyons
•Tailwind

STANDARD APPROACH VS UTILITY CLASSES
.standard {
color: red;
float: left;
}
<div class="standard">
Standard Approach
</div>
.text-red {
color: red;
}
.float-left {
float: left;
}
<div class="text-red float-left">
Utility Classes Approach
</div>

Example adapted from https://tailwindcss.com/docs/what-is-tailwind/
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0"
src="johnriv.jpg" alt="">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">John Riviello</p>
<p class="text-sm leading-tight text-grey-dark">Maker of web things</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-
white border border-purple text-purple hover:bg-purple hover:text-white">Message</
button></div></div></div></div>

Tweet source: https://twitter.com/sindresorhus/status/1089075390327316480

“MAN SITTING ON GRASS FIELD” BY PIXABAY LICENSED BY CC0

Tweet source: https://twitter.com/dan_abramov/status/1089208929572319232

“WHITE AND GREY KITTEN SMELLING WHITE DAISY FLOWER” BY ALEX BARGAIN LICENSED BY PEXELS.COM

CSS:
😁 Easy to add 📈
😬 Hard to remove
SOLUTION?
TAILWIND AND…

Purgecss
https://www.purgecss.com

CSSSTATS.COM RESULTS
Current Web App Tailwind + PurgeCSS
RULES 6,260 289
SELECTORS 8,422 336
DECLARATIONS 29,100 440
PROPERTIES 171 129
FONT-SIZE 1,939 13
WIDTH 682 20
HEIGHT 578 12
COLOR 2,322 44

USING TAILWIND
“HELLO WORLD”
npm install tailwindcss --save-dev
styles.css:
@tailwind base; /* Collection of CSS Reset rules */
@tailwind components; /* Container Styles */
@tailwind utilities; /* Classes you’ll use */
npx tailwind build styles.css -o output.css

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND COMPONENTS:
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
.container {
max-width: 768px;
}
}
.container {
max-width: 1024px;
}
}
.container {
max-width: 1280px;
}
}

USING TAILWIND
.container {
width: 100%;
}
.container {
max-width: 640px;
}
}
.container {
max-width: 768px;
}
}
.container {
max-width: 1024px;
}
}
.container {
max-width: 1280px;
}
}
Markup in your HTML:
<div class="container">
container content
</div>
container content

USING TAILWIND
.container {
width: 100%;
}
.container {
max-width: 640px;
}
}
.container {
max-width: 768px;
}
}
.container {
max-width: 1024px;
}
}
.container {
max-width: 1280px;
}
}
<div class="container mx-auto">
container content
</div>
container content

USING TAILWIND
.container {
width: 100%;
}
.container {
max-width: 640px;
}
}
.container {
max-width: 768px;
}
}
.container {
max-width: 1024px;
}
}
.container {
max-width: 1280px;
}
}
<div class="container mx-auto px-8">
container content
</div>
container content

<div class="container">
container content
</div>
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
.container {
max-width: 640px;
}
}
.container {
max-width: 768px;
}
}
.container {
max-width: 1024px;
}
}
...
1 2 4
USING TAILWIND
container content
tailwind.config.js:
module.exports = {
theme: {
container: {
center: true,
padding: '2rem',
},
}
}
OR SET IN CONFIGURATION:

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND UTILITIES:
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.bg-fixed {
background-attachment: fixed;
}
.bg-local {
background-attachment: local;
}
.bg-scroll {
background-attachment: scroll;
}
.bg-bottom {
background-position: bottom;
}
.bg-center {
background-position: center;
}
.bg-left {
background-position: left;
}
.bg-left-bottom {
background-position: left bottom;
}
.bg-left-top {
background-position: left top;
}
.bg-right {
background-position: right;
}
.bg-right-bottom {
background-position: right bottom;
}
.bg-right-top {
background-position: right top;
}
.bg-top {
background-position: top;
}
.bg-repeat {
background-repeat: repeat;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.bg-repeat-x {
background-repeat: repeat-x;
}
.bg-repeat-y {
background-repeat: repeat-y;
} ...

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND UTILITIES - RESPONSIVE VARIANTS:
.sm:appearance-none {
appearance: none;
}
.sm:bg-fixed {
}
.sm:bg-local {
}
.sm:bg-scroll {
}
.sm:bg-bottom {
}
.sm:bg-center {
}
.sm:bg-left {
}
.sm:bg-left-bottom {
}
.sm:bg-left-top {
}
.sm:bg-right {
}
.sm:bg-right-bottom {
}
.sm:bg-right-top {
}
.sm:bg-top {
}
.sm:bg-repeat {
}
.sm:bg-no-repeat {
}
.sm:bg-repeat-x {
}
.sm:bg-repeat-y {
} ...

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND UTILITIES - RESPONSIVE VARIANTS:
.sm:appearance-none {
appearance: none;
}
.sm:bg-fixed {
}
.sm:bg-local {
}
.sm:bg-scroll {
}
.sm:bg-bottom {
}
.tablet:bg-center {
}
.sm:bg-left {
}
.sm:bg-left-bottom {
}
.sm:bg-left-top {
}
.sm:bg-right {
}
.sm:bg-right-bottom {
}
.tablet:bg-right-top {
}
.tablet:bg-top {
}
.tablet:bg-repeat {
}
.tablet:bg-no-repeat {
}
.tablet:bg-repeat-x {
}
.tablet:bg-repeat-y {
} ...
tailwind.config.js:
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
'desktop': '1280px',
}
}
}
CAN MODIFY IN CONFIGURATION:

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND UTILITIES - DEFAULT COLOR PALETTE:
.bg-transparent {
background-color: transparent;
}
.bg-black {
background-color: #000;
}
.bg-white {
background-color: #fff;
}
.bg-gray-100 {
background-color: #f7fafc;
}
.bg-gray-200 {
background-color: #edf2f7;
}
.bg-gray-300 {
background-color: #e2e8f0;
}
.bg-gray-400 {
background-color: #cbd5e0;
}
.bg-gray-500 {
background-color: #a0aec0;
}
.bg-gray-600 {
}
.bg-gray-700 {
background-color: #4a5568;
}
.bg-gray-800 {
background-color: #2d3748;
}
.bg-gray-900 {
background-color: #1a202c;
}
.bg-red-100 {
background-color: #fff5f5;
}
.bg-red-200 {
background-color: #fed7d7;
}
.bg-red-300 {
background-color: #feb2b2;
}
.bg-red-400 {
background-color: #fc8181;
}
.bg-red-500 {
background-color: #f56565;
}
.bg-red-600 {
background-color: #e53e3e;
} ... MANY, MANY MORE!

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND UTILITIES - CUSTOMIZED COLOR PALETTE:
.bg-transparent {
}
.bg-black {
}
.bg-white {
}
.bg-gray-100 {
}
.bg-gray-200 {
}
.bg-gray-300 {
}
.bg-indigo {
background-color: #5c6ac4;
}
.bg-blue {
background-color: #007ace;
}
.bg-red {
background-color: #de3618;
}
tailwind.config.js:
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
CAN MODIFY IN
CONFIGURATION:

USING TAILWIND
OUTPUT.CSS FROM @TAILWIND UTILITIES - STATE VARIANTS:
.bg-transparent {
}
.bg-black {
}
.bg-white {
}
.bg-gray-100 {
}
.bg-gray-200 {
}
.bg-gray-300 {
}
.bg-indigo {
}
.bg-blue {
}
.bg-red {
}
.hover:bg-indigo:hover {
}
.hover:bg-blue:hover {
}
.hover:bg-red:hover {
}
.focus:bg-indigo:focus {
}
.focus:bg-blue:focus {
}
.focus:bg-red:focus {
}
tailwind.config.js:
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
CAN MODIFY IN
CONFIGURATION:

.bg-transparent {
}
.bg-black {
}
.bg-white {
}
.bg-gray-100 {
}
.bg-gray-200 {
}
.bg-gray-300 {
}
Ooh pretty colors!
1 3 1
USING TAILWIND
.bg-indigo {
}
.bg-blue {
}
.bg-red {
}
}
}
}
}
}
}
tailwind.config.js:
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
CAN MODIFY IN
CONFIGURATION:
<button class="bg-indigo
hover:bg-blue focus:bg-red">
Ooh pretty colors!
</button>

.bg-transparent {
}
.bg-black {
}
.bg-white {
}
.bg-gray-100 {
}
.bg-gray-200 {
}
.bg-gray-300 {
}
Ooh pretty colors!
1 3 2
USING TAILWIND
.bg-indigo {
}
.bg-blue {
}
.bg-red {
}
}
}
}
}
}
}
tailwind.config.js:
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
CAN MODIFY IN
CONFIGURATION:
Ooh pretty colors!
</button>

.bg-transparent {
}
.bg-black {
}
.bg-white {
}
.bg-gray-100 {
}
.bg-gray-200 {
}
.bg-gray-300 {
}
Ooh pretty colors!
1 3 3
USING TAILWIND
.bg-indigo {
}
.bg-blue {
}
.bg-red {
}
}
}
}
}
}
}
tailwind.config.js:
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
CAN MODIFY IN
CONFIGURATION:
Ooh pretty colors!
</button>

YOUR CSS FUTURE?
1 3 4
Purgecss =+
LINKS
• Tailwind Docs: https://next.tailwindcss.com/
• PurgeCSS: https://www.purgecss.com/
• Tailwind Container: https://next.tailwindcss.com/docs/container/
• Tailwind Configuration: https://next.tailwindcss.com/docs/configuration
• Tailwind Responsive Design: https://next.tailwindcss.com/docs/responsive-design
• Tailwind Colors: https://next.tailwindcss.com/docs/colors
• Tailwind State Variants: https://next.tailwindcss.com/docs/state-variants/
📉

https://react-styleguidist.js.org/examples/basic/

https://react-styleguidist.js.org/docs/documenting.html

A FRAMEWORK
FOR CHOOSING
YOUR
FRAMEWORK

“LANDSCAPE PHOTOGRAPHY OF FACTORY” BY PIXABAY LICENSED BY CC0

ANALYTIC
HIERARCHY
PROCESS
by Thomas L. Saaty

ANALYTIC HIERARCHY PROCESS (AHP)
Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
EDUCATIONEXPERIENCE INTEGRITY
KATE PAUL

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL

AHP FUNDAMENTAL SCALE FOR PAIRWISE COMPARISONS
Intensity of
Importance
Definition Explanation
1 Equal importance Two elements contribute equally to the
objective
3 Moderate importance
Experience and judgement moderately
favor one element over another
5 Strong importance
Experience and judgement strongly
favor one element over another
7 Very strong importance
One element is favored very strongly
over another; its dominance is
demonstrated in practice
9 Extreme importance
The evidence favoring one element  
over another is of the highest possible
order of affirmation
https://en.wikipedia.org/wiki/Analytic_hierarchy_process_–_leader_example#Pairwise_comparisons
Intensities of 2, 4, 6, and 8 can be used to express intermediate values. 1.1, 1.2, 1.3, etc. can be used for elements that are very close in importance.

AHP PAIRWISE SCORING
https://en.wikipedia.org/wiki/Analytic_hierarchy_process_–_leader_example#Alternatives_vs._criteria
Alternatives compared with respect to EXPERIENCE
RAMÓN 1 KATE 4
RAMÓN 4 PAUL 1
KATE 9 PAUL 1

AHP RECIPROCAL SCORING
EXPERIENCE RAMÓN KATE PAUL
RAMÓN 1 1/4 4
KATE 4 1 9
PAUL 1/4 1/9 1

AHP MATRIX PRIORITY CALCULATIONS
EXPERIENCE RAMÓN KATE PAUL PRIORITY
RAMÓN 1 1/4 4 0.2 1 7
KATE 4 1 9 0.7 1 7
PAUL 1/4 1/9 1 0.066

RAMÓN 1 1/4 4 0.2 1 7
KATE 4 1 9 0.7 1 7
PAUL 1/4 1/9 1 0.066

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL
0.217 0.717 0.066

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
EDUCATIONEXPERIENCE INTEGRITYCHARISMA
RAMÓN KATE PAUL

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMAEDUCATIONEXPERIENCE
RAMÓN
INTEGRITY
KATE PAUL

CRITERIA EXPERIENCE EDUCATION CHARISMA INTEGRITY PRIORITY
EXPERIENCE 1 4 3 7 0.547
EDUCATION 1/4 1 1/3 3 0.127
CHARISMA 1/3 3 1 5 0.270
INTEGRITY 1/7 1/3 1/5 1 0.056
https://en.wikipedia.org/wiki/Analytic_hierarchy_process_–_leader_example#Criteria_vs._the_Goal

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL

CRITERIA EXPERIENCE EDUCATION CHARISMA INTEGRITY PRIORITY
EXPERIENCE 1 4 3 7 0.547
EDUCATION 1/4 1 1/3 3 0.127
CHARISMA 1/3 3 1 5 0.270
INTEGRITY 1/7 1/3 1/5 1 0.056
https://en.wikipedia.org/wiki/Analytic_hierarchy_process_–_leader_example#Criteria_vs._the_Goal

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL
0.547

RAMÓN 1 1/4 4 0.2 1 7
KATE 4 1 9 0.7 1 7
PAUL 1/4 1/9 1 0.066

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL
0.547
0.217 0.717 0.066

AHP FINAL PRIORITY CALCULATIONS
EXPERIENCE PRIORITY
PRIORITY 
vs. GOAL
PRIORITY with
respect to
EXPERIENCE
RAMÓN 0.2 1 7
KATE 0.7 1 7
PAUL 0.066
https://en.wikipedia.org/wiki/Analytic_hierarchy_process_–_leader_example#Synthesizing_final_priorities

Goal:
Criteria:
Alternatives:
CHOOSE THE MOST
SUITABLE LEADER
CHARISMA
RAMÓN
KATE PAUL
0.547
0.217 0.717 0.066

EXPERIENCE PRIORITY
PRIORITY 
vs. GOAL
PRIORITY with
respect to
EXPERIENCE
RAMÓN 0.2 1 7 0.547
KATE 0.7 1 7 0.547
PAUL 0.066 0.547

EXPERIENCE PRIORITY
PRIORITY 
vs. GOAL
PRIORITY with
respect to
EXPERIENCE
RAMÓN 0.2 1 7 0.547
KATE 0.7 1 7 0.547
PAUL 0.066 0.547
x
x
x

EXPERIENCE PRIORITY
PRIORITY 
vs. GOAL
PRIORITY with
respect to
EXPERIENCE
RAMÓN 0.2 1 7 0.547 0.1 1 9
KATE 0.7 1 7 0.547 0.392
PAUL 0.066 0.547 0.036
x
x
x
=
=
=

CANDIDATE
PRIORITY with
respect to
EXPERIENCE
PRIORITY with
respect to
EDUCATION
PRIORITY with
respect to
CHARISMA
PRIORITY with
respect to
INTEGRITY
PRIORITY with
respect to
GOAL
RAMÓN
KATE
PAUL

CANDIDATE
PRIORITY with
respect to
EXPERIENCE
PRIORITY with
respect to
EDUCATION
PRIORITY with
respect to
CHARISMA
PRIORITY with
respect to
INTEGRITY
PRIORITY with
respect to
GOAL
RAMÓN 0.1 1 9
KATE 0.392
PAUL 0.036

CANDIDATE
PRIORITY with
respect to
EXPERIENCE
PRIORITY with
respect to
EDUCATION
PRIORITY with
respect to
CHARISMA
PRIORITY with
respect to
INTEGRITY
PRIORITY with
respect to
GOAL
RAMÓN 0.1 1 9 0.024 0.201 0.015
KATE 0.392 0.010 0.052 0.038
PAUL 0.036 0.093 0.017 0.004

CANDIDATE
PRIORITY with
respect to
EXPERIENCE
PRIORITY with
respect to
EDUCATION
PRIORITY with
respect to
CHARISMA
PRIORITY with
respect to
INTEGRITY
PRIORITY with
respect to
GOAL
RAMÓN 0.1 1 9 0.024 0.201 0.015
KATE 0.392 0.010 0.052 0.038
PAUL 0.036 0.093 0.017 0.004
=
=
=
+
+
+
+
+
+
+
+
+

CANDIDATE
PRIORITY with
respect to
EXPERIENCE
PRIORITY with
respect to
EDUCATION
PRIORITY with
respect to
CHARISMA
PRIORITY with
respect to
INTEGRITY
PRIORITY with
respect to
GOAL
RAMÓN 0.1 1 9 0.024 0.201 0.015 0.358
KATE 0.392 0.010 0.052 0.038 0.492
PAUL 0.036 0.093 0.017 0.004 0.149
=
=
=
+
+
+
+
+
+
+
+
+

“SURVEY ICON” BY PIXABAY LICENSED BY CC0

“FOUR PERSON HOLDING BULB LIGHT DECORS” BY RAWPIXEL.COM LICENSED BY PEXELS.COM

“HAWAII HANA ROAD” BY PIXABAY LICENSED BY CC0

“WELCOME TO HANA” BY KIRT EDBLOM LICENSED BY CC BY-SA 2.0

“HANA BEACH PARK” BY TRAVIS THURSTON LICENSED BY CC BY-SA 3.0

IT’S THE
JOURNEY,
NOT THE
DESTINATION

IT’S THE
JOURNEY,
AND THE
DESTINATION

OUR JS FRAMEWORK CRITERIA
•Community
•Performance
•Redux compatibility
•Web Components support
•Localization
•Developer Productivity
•Hybrid App Support

OUR JS FRAMEWORK CRITERIA (WEIGHTED)

OUR JS FRAMEWORK DECISION
Option 1:
Option 2:
Option 3:

OUR JS FRAMEWORK DECISION
Option 1:
Option 2:
Option 3:
Try it with your team!
http://github.com/ComcastSamples/ahp-tool

TAKEAWAYS
• Build with a Sacrificial Architecture
• Use Redux (or similar unidirectional data flow)
• Use Tailwind with PurgeCSS
• Demo Driven Development
• Use the Analytic Hierarchy Process for decisions
LINKS
• https://redux.js.org/
• https://redux-observable.js.org/
• https://tailwindcss.com
• https://www.purgecss.com/
• http://github.com/ComcastSamples/ahp-tool
THANK YOU!
Please send comments,
questions, or feedback
to me at @JohnRiv

Future-Proofing Your JavaScript Framework Decision

Recommended

Recommended

More Related Content

Similar to Future-Proofing Your JavaScript Framework Decision

Similar to Future-Proofing Your JavaScript Framework Decision (20)

More from John Riviello

More from John Riviello (12)

Recently uploaded

Recently uploaded (20)

Future-Proofing Your JavaScript Framework Decision