Playful Features Kevin Bridges Applied Software Technologies - PowerPoint PPT Presentation

Playful Features Kevin Bridges Applied Software Technologies kevin@wiiBridges.com @kevinast https://bit.ly/feature-u-pres slides, syllabus, articles, docs, and repo!

Kevin Bridges • Married, Father, Grandfather Applied Software Technologies • 40 yrs in software (20 yrs consulting) kevin@wiiBridges.com • Retired @kevinast • Be nice to the old guy :-) https://bit.ly/feature-u-pres slides, syllabus, articles, docs, and repo!

Playful Features Feature-Based Development that "Plugs and Plays" https://bit.ly/feature-u-pres slides, syllabus, articles, docs, and repo!

https://feature-u.js.org/ Sid ideBar: feature-u u docs

Goals • Requirements based • Encapsulation • Self Sufficient • Plug-and-Play Hurdles • Isolation vs. Collaboration • Start-Up Initialization • Framework Configuration • UI Composition • Feature Enablement In short, how do we achieve a running application from these isolated features?

Two Primary Tenets 1. Feature Runtime Consolidation needed to Achieve our 2. Feature Collaboration Goals

1.

2.

2. How is Cross Feature Communication achieved in a way that doesn't break encapsulation?

The feature-u Solution

Covered in this Session : 1. Simplified App Startup a. App-Specific Initialization in Features b. Auto-Configuration of Frameworks The feature-u Solution 2. Feature Enablement 3. Cross-Feature Collaboration a. Cross-Feature Sharing b. Cross-Feature UI Composition 4. A/B Feature Swap 5. Plug-and-Play

eatery-nod-w https://github.com/KevinAst/eatery-nod-w

1. Simplified App Startup I can start your app in 1,577 lines of code! 1

2. Plug-and-Play Feature Enablement

3. A/B Swap Mock Services

How doe oes feature-u ac accommodate: 1. Feature Runtime Consolidation APP INITIALIZATION FRAMEWORK CONFIGURATION

appWillStart( {fassets, curRootAppElm} ): rootAppElm|void invoked early in the app startup process … supports accumulative static root DOM injection appInit( {showStatus, fassets, [appState, dispatch]} ): promise|void invoked later in the app startup process … supports blocking async initialization 1. Feature Runtime Consolidation appDidStart( {fassets, [appState, dispatch]} ): void Application invoked immediately after app starts … triggers “app is running” processes Lif ife Cycle Hooks Feature Encapsulation of App Startup

1. Feature Runtime Consolidation Framework Configuration Ext xtendable Aspect Goal Plu lugins feature-u is extendable!

1. Feature Runtime Consolidation Ext xtendable Aspect Plu lugins

eatery-nod-w https://github.com/KevinAst/eatery-nod-w 1. . Feature Runtime Consolidation

directory structure src/app.js src/ │ app.js ... our mainline - launches app via launchApp() │ ├──feature/ │ │ index.js ... accumulate/promote all app Feature objects │ │ import React from 'react'; │ ├──auth/ ... the app's authorization feature │ │ │ actions.js import Expo from 'expo'; import {LayoutAnimation} from 'react-native'; │ │ │ fassets.js │ │ │ feature.js ... expose aspects of interest to feature -u import {launchApp} from 'feature-u'; import {createReducerAspect} from 'feature-redux'; │ │ │ featureName.js import {createLogicAspect} from 'feature-redux-logic'; │ │ │ index.js import {createRouteAspect} from 'feature-router'; │ │ │ logic.js import features from './feature'; │ │ │ route.js import SplashScreen from './util/comp/SplashScreen'; │ │ │ signInFormMeta.js │ │ │ state.js │ │ └──comp/ // launch our application, exposing the feature-u Fassets object // ... facilitating cross-feature-communication! │ │ SignInScreen.js export default launchApp({ │ │ SignInVerifyScreen.js aspects: appAspects(), │ │ features, │ ├── currentView/ ... more features registerRootAppElm(rootAppElm) { │ │ Expo.registerRootComponent(()=>rootAppElm); // convert rootAppElm to a React Component │ ├──device/ ... feature to initialize the device │ │ │ actions.js } }); │ │ │ api.js │ │ │ appDidStart.js │ │ │ appWillStart.js // accumulate/configure the Aspect plugins matching our app's run-time stack │ │ │ fassets.js function appAspects() { │ │ │ feature.js ... expose aspects of interest to feature -u │ │ │ featureName.js │ │ │ index.js // define our framework run-time stack const reducerAspect = createReducerAspect(); │ │ │ logic.js │ │ │ route.js const logicAspect = createLogicAspect(); const routeAspect = createRouteAspect(); │ │ │ state.js const aspects = [ │ │ └── init/ reducerAspect, // redux ... extending: Feature.reducer │ │ platformSetup.android.js logicAspect, // redux-logic ... extending: Feature.logic │ │ platformSetup.ios.js │ │ routeAspect, // Feature Routes ... extending: Feature.route Feature Encapsulation ]; │ ├──discovery/ ... more features │ ├──eateries/ // configure Aspects (as needed) │ ├──firebase/ // ... StateRouter fallback screen (when no routes are in effect) │ ├── leftNav/ routeAspect.config.fallbackElm$ = <SplashScreen msg="I'm trying to think but it hurts!"/>; │ ├── logActions/ │ └──sandbox/ │ // beam me up Scotty :-) return aspects; └──util/ ... common utilities used across all features } src/app.js of export default launchApp({ aspects: appAspects(), features, registerRootAppElm(rootAppElm) { Expo.registerRootComponent(()=>rootAppElm); } }); App Startup 1. . Feature • App Initialization ( Application Life Cycle Hooks ) Runtime • Framework Configuration ( Extendable Aspect Plugins ) Consolidation Made possible because feature-u starts the app! src/feature/device/appWillStart.js src/feature/device/appDidStart.js import React from 'react'; import actions from './actions'; import platformSetup from './init/platformSetup'; import Notify from '../../util/notify'; /** * An app-level life-cycle hook that dispatches our bootstrap action src/feature/leftNav/appWillStart.js * that gets the ball rolling! /** * An app-level life-cycle hook, initializing our feature by: */ src/feature/firebase/feature.js * - performing platform-specific setup (iOS/Android) export default function appDidStart({fassets, appState, dispatch}) { * - inject our notify utility in the root DOM dispatch( actions.bootstrap() ); */ } export default function appWillStart({fassets, curRootAppElm}) { // platform-specific setup (iOS/Android) import React from 'react'; platformSetup(); import {Drawer} from 'native-base'; import SideBar, // initialize notify utility, by injecting it in our App root import {createFeature} from 'feature-u'; return [React.Children.toArray(curRootAppElm), <Notify key="Notify"/>]; import initFireBase from './init/initFireBase'; {registerDrawer, closeSideBar} from './comp/SideBar'; } /** * The **'firebase'** feature initializes the google firebase service, /** * and provides a placeholder for future API abstractions. * Inject our Drawer/SideBar component at the root of our app */ */ export default function appWillStart({fassets, curRootAppElm}) { export default createFeature({ name: 'firebase', return ( <Drawer ref={ ref => registerDrawer(ref) } appWillStart({fassets, curRootAppElm}) { content={<SideBar/>} initFireBase(); // initialize FireBase onClose={closeSideBar}> }, {curRootAppElm} }); redux auto configured </Drawer> ); } by feature-redux Aspect Plugin

Feature Enablement feature-u so solu lutio ion

Feature Enablement • by default all Features are active • can be disable via enabled Feature directive src/feature/sandbox/feature.js Feature export default createFeature({ Enablement name: 'sandbox’ , enabled: inDevelopmentMode(), ... snip snip }); Made possible because feature-u starts the app!

How does fea eatu ture-u accommodate: 2. Feature Collaboration Cross Feature Feature Based UI Communication Composition

fassets – Feature Assets • fassets facilitate Cross Feature Communication • accommodates all Cross Feature Sharing • " Public Face " of a feature 2. Feature Collaboration Cross Feature Communication • Open fassets • • SideBar : fasset ( not facet )

Made possible because feature-u starts the app! 2. Feature Collaboration Cross Feature Communication fassets

code snippet ... defining fassets export default createFeature({ name: 'featureA', fassets: { define: { 'actions.openView': actions.view.open, // openView(viewName): Action 2. Feature Collaboration 'sel.currentView': selector.currentView, // currentView(state): viewName 'sel.isDeviceReady': selector.isDeviceReady, // isDeviceReady(state): boolean Cross Feature }, }, Communication ... }); fassets using fassets if (fassets.sel.isDeviceReady(appState)) { ... } NOTE: This uses a push philosophy