Top Banner
33

JavaScript All The Things

Jan 17, 2017

Download

Software

Jordan Yaker
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: JavaScript All The Things
Page 2: JavaScript All The Things

2016: A YEAR IN REVIEW (THE DRINKING GAME)➤ Every time I change languages take a shot.➤ Every time I change jobs take two shots.➤ Every time I change what I’m working on drink a beer.➤ Call emergency services.

Page 3: JavaScript All The Things
Page 4: JavaScript All The Things
Page 5: JavaScript All The Things

“I NEED TO SHIP SOMETHING

-Me (Around July . . . Roughly)

Page 6: JavaScript All The Things

BREADCRUMB TRAIL TO AN IDEA➤ Munging the iTunes Review Feed took a lot of time.

➤ Fragile Data➤ Frequent Problems

➤ It would be nice to check the status on my phone…

Page 7: JavaScript All The Things

HOW ABOUT A MOBILE-FIRST DASHBOARD?

Page 8: JavaScript All The Things

THE CHALLENGE➤ Build a …

➤ API and SDK’s➤ Command Line Interface (CLI)➤ Web App➤ Serverless Data Pipeline Component➤ Mobile App

➤ Treat it like a hackathon➤ MVP-Focused➤ Time-Box

Page 9: JavaScript All The Things

Web Application

CLI API (Express.js)

SDK’s Mobile

Serverless (Azure Function)

Page 10: JavaScript All The Things

Web ApplicationSDK’s Mobile

CLI API (Express.js) Serverless (Azure Function)

Page 11: JavaScript All The Things

Web ApplicationSDK’s Mobile

?

CLI API (Express.js) Serverless (Azure Function)

Page 12: JavaScript All The Things

Web ApplicationSDK’s Mobile

CLI API (Express.js) Serverless (Azure Function)

Page 13: JavaScript All The Things
Page 14: JavaScript All The Things

THE CHALLENGE➤ Build …

➤ API and SDK’s➤ Command Line Interface (CLI)➤ Web App➤ Serverless Component➤ Mobile App

➤ Treat it like a hackathon➤ MVP-Focused➤ Time-Box

Page 15: JavaScript All The Things

STAND UP THE WEB APP➤ Create the initial database schema.➤ Allow for account sign-up and basic sharing.➤ Templates:

➤ https://railskits.com➤ https://github.com/railsapps➤ https://github.com/abdesigner/SaaStarter

➤ Customize the template.➤ Total Time: 10 Hours

Page 16: JavaScript All The Things
Page 17: JavaScript All The Things
Page 18: JavaScript All The Things

HOW TO LOSE A MONTH➤ Learn Docker Networking➤ Learn About Kubernetes➤ Make Contributions to Open Source Projects

➤ https://github.com/deis/deis/pull/5097➤ https://github.com/deis/postgres/pull/159➤ https://github.com/kubernetes/kubernetes-anywhere

/pull/258

Page 19: JavaScript All The Things

DESIGNING THE API➤ Use swagger.io to create the API spec.➤ Use the existing schema setup by the web app.➤ Keep it RESTful and simple.

Page 20: JavaScript All The Things

BUILDING THE API➤ Configs: dotenv, config➤ ORM: Sequelize

➤ Bonus: Sequelize CLI➤ Validation: express-validator➤ Authorization: Passport➤ Authentication: Custom➤ Security: Helmet➤ Total Time: 16 Hours

Page 21: JavaScript All The Things

DESIGNING THE CLI➤ Similar to Heroku, CloudFoundry, or Dies.➤ Users should be able to login and logout.➤ Help should be part of the command definitions.➤ Help should be available at the command group.➤ No funky UI in the CLI.

Page 22: JavaScript All The Things

BUILDING THE CLI➤ Security: netrc, dashery-js

➤ Use the API to login.➤ Store token using .netrc

➤ CLI Framework: COA➤ JavaScript Compiler: Nexe➤ Gotchas:

➤ No relative paths! (Browserify loves your tears)➤ I got 1 problem and CoffeeScript is 99 of them.➤ Don’t keep your Nexe file open.➤ Hey Nexe, can I have some HDD space back?

➤ Total Time: 32 Hours

Page 23: JavaScript All The Things

BUILDING THE SERVERLESS COMPONENT (AZURE FUNCTION)➤ Re-use code from the API:

➤ dashery-models➤ dashery-auth

➤ Middleware: https://github.com/christopheranderson/func-middleware

➤ Strategies: Custom-Rolled

Page 24: JavaScript All The Things

API + SERVERLESS

Page 25: JavaScript All The Things
Page 26: JavaScript All The Things
Page 27: JavaScript All The Things

ABOUT THOSE AZURE APPLICATION GATEWAYS➤ Great SSL Offloading➤ Super Slow For Applying Configuration Changes➤ Configuration Templates Are Verbose➤ No Good URL Routing Options

➤ Wanted: /applications/{appId}/dashboards/{dashId}/data

➤ Got: /data/applications/{appId}/dashboards/{dashId}

➤ Total Time: 36 Hours

Page 28: JavaScript All The Things

DESIGNING THE MOBILE APP➤ Make it simple

➤ Doesn’t have to be beautiful, just not jarring.➤ Users should be able to login and logout.

➤ Session state goes to local storage.➤ Users stay logged in.

➤ Slide out menu for Application selection.➤ Swipe left and right to go to different dashboards.➤ Pull to refresh Dashboard.➤ Dashboards render with common dashboard library.

Page 29: JavaScript All The Things

LEARNING REACT, REDUX, AND REACT NATIVE➤ Apply lessons learned from Polymer.➤ Read the docs:

➤ https://facebook.github.io/react-native/➤ https://facebook.github.io/react/➤ http://redux.js.org/

➤ Watch some videos:➤ https://egghead.io/courses/getting-started-with-redux

➤ Read some blogs:➤ https://medium.com/@jonlebensold/getting-started-with-rea

ct-native-redux-2b01408c0053#.4bhmi09ry➤ Total Time: 16 Hours

Page 30: JavaScript All The Things

REACT NATIVE (AND HOW REAL THE STRUGGLE GETS)➤ Security: dashery-js

➤ Use the API to login.➤ Store token in state.

➤ Validation: validator➤ Patch Timers: react-mixin, react-timer-mixin➤ Animations:

➤ Just curl up in a ball right here.➤ Rock back and forth crying.

➤ Total Time: 8 Hours . . . and counting

Page 31: JavaScript All The Things

BUILDING THE SDK’S➤ Create Package Configurations➤ Use Swagger Codegen➤ Total Time: 1 Hour

Page 32: JavaScript All The Things

THINGS TO DO➤ Finish up the React Native application.➤ Automate builds and deployments:

➤ fastlane.tools➤ travis-ci.com

➤ Create basic dashboards for everyone. ➤ Time Budget: 4 Hours

➤ Write some support documentation.➤ Time Budget: 4 Hours

➤ Launch!➤ Time Budget: ?????

Page 33: JavaScript All The Things

QUESTIONS?https://getdashery.io