Aura LA GDG - July 17-2017
•
1 like•153 views
When I arrived at Credit Karma I needed to find and connect with people from different teams across multiple projects and verticals. The problem was that there was no good way to accomplish this except by talking to as many people at the company as possible to find out about the different roles and groups working on things. I decided I needed a way to search for people in order to speed up my workflow. This resulted in the design and implementation of a pet project called Aura. This presentation is about the process of creating Aura and how it gathered a cult following of support at Credit Karma. I will be covering the problem space, the technology and the methods of winning mind share that led to the execution of the project. This includes React, Electron, Firebase and a host of other libraries and services that allowed Aura to be built over some weekends without the need of a server.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Aura LA GDG - July 17-2017
Similar to Aura LA GDG - July 17-2017 (20)
Recently uploaded
Recently uploaded (20)
Aura LA GDG - July 17-2017
- 1. Step 1: Build your own tools. Step 3: take over world Electron - Webpack - React - Firebase
- 2. What this talk is about A problem I had and a solution I made Some learnings from the solution A smattering of implementation details
- 3. WARNING: THERE WILL BE CODE
- 4. Who am I? Canadian (from Toronto) ex-Googler (6yrs - swe, devrel) Head of DevRel at Credit Karma LinkedIn: https://goo.gl/CQDEr2 Twitter: @_krispy_
- 6. @Google I had tools to help me: go/teams = quick company directory cs/ = quick code search go/easyokr = OKR tool go/tldr = quick company news ...lots more
- 8. Missing Tools of the trade @Credit Karma the tools ...umm Workday = org chart (sort of…) News = emails / slack Stash = code search (now in github) OKRs = ?? patch work ?? I saw a lot of potential to improve
- 9. The problem How am I supposed to find the people I need?
- 10. A solution Find a way to make what I need
- 11. Aura
- 12. Aura - The initial plan Create a tool that uses existing data to help me find the people, projects and company information I need.
- 13. SEARCH Refinements Refinements Refinements First Name Last Name - Other First Name Last Name - Other First Name Last Name - Other Pagination Pagination First Name Last Name - Other First Name Last Name - Other First Name Last Name - Other
- 14. Name Email Location % Managers NameName Name Peers NameName Name Reports NameName Name Projects/Skills/Bios NameName Name Badges Awards Etc. Edit
- 16. DEMO TIME
- 17. Modern web tools Step 1: Build stuff
- 18. Top 23 Best Frameworks…?? WAT? ✖ MobX ✖ Omniscient ✖ Ractive.js ✖ Mercury ✖ WebRx ✖ Deku ✖ Riot.js ✖ Mithril ✖ Vue.js ✖ MVC JavaScript Frameworks ✖ Angular.js ✖ jQuery ✖ React ✖ Socket ✖ Polymer ✖ Node.js ✖ Meteor ✖ D3.js ✖ Ember ✖ Aurelia ✖ Knockout ✖ Keystone ✖ Backbone ✖ Stapes
- 19. I started to read up on things... https://goo.gl/bdhB7P How it feels to learn JavaScript in 2016 Jose Aguinaga
- 23. Node.js, React, Electron, Material UI, Firebase,.... Electron
- 24. Electron Electron + React = Simple Serverless Single Browser AURA
- 25. Pros & Cons Pros: - Single Browser - Small Surface Area - Multiple Versions - OS Context Menu - OS Function Access Cons: - OAuth2 - Unsigned (sec.) - Pushing updates
- 26. Workday JSON AURA Data Proc Function DB Trigger Function Firebase Auth Request Response Cron Trigger
- 27. Developer Setup Tools: Install iTerm2 and ZSH + customize Install GitKraken Install Visual Studio Code Install NodeJS (v7.7+) Install Yarn Install Electron globally
- 28. These are actually Electron Apps!! GitKraken Visual Studio Code
- 29. My iTerm2 Setup I use zsh - https://goo.gl/GeVQr6 - A lot of plugins - Using the cobalt2 theme Pro Tip - Best way to make iterm2 use zsh
- 30. Installing Electron & Firebase CLI + other things $> npm install -g electron $> npm install -g firebase-tools $> npm install -g firebase-bolt $> npm install -g create-react-app
- 31. Developer Setup Services: Create a Firebase project (add billing) Create an Algolia account (free tier) Create a github repo for my project
- 32. Firebase Setup Creating a Firebase Project
- 33. Get your keys and IDs
- 34. Algolia.com
- 36. Developer Setup Electron-react-boilerplate I created my own (simpler and works) Get it here: https://goo.gl/7RX5pf
- 37. Ok, so where are we... We setup the tools and created service accounts. We cloned the simple electron boilerplate (and changed the origin to our new git repo). We have a project directory with a few files.
- 38. Electron code Web app code
- 39. main.js Points to our webpack’d react app
- 40. Don’t forget to specify the files to bundle with electron Electron package.json
- 42. Side note: by the time I had a build that I would classify as an Alpha release the number of dependencies had grown quite a bit. The stand out dependencies: - material-ui - axios - redux - webpack - firebase
- 44. Oops… how do we fix this? Oh ya, we need to build our react app first…
- 46. Set it on fire $> firebase login (follow instructions) $> firebase init (do this from the project root - not the react-app) - Choose all options - Pick your project to attach to - Keep the defaults
- 49. Firebase Database Firebase Database Rules & Structure database.rules.bolt
- 50. Firebase Database - Rules with Bolt Bolt helps you describe your rules. $> firebase-bolt database.rules.bolt Produces database.rules.json Gets pushed when you firebase deploy
- 51. We should talk about REDUX now... Application Store Reducer A Reducer B Reducer X Provider Component Action connected properties
- 52. Enter Redux
- 53. How about some webpack $> yarn add babel-loader --dev $> yarn add babel-core --dev $> yarn add babel-preset-es2016 --dev $> yarn add babel-preset-react --dev $> yarn add babel-preset-stage-0 --dev $> yarn add thunk redux-thunk
- 59. Enter Redux & Firebase src/common/FirebaseConfig.js src/actions/FirebaseActions.js
- 61. Enter Redux & Firebase src/index.js src/component/App.js
- 62. Our Data
- 63. Project State Note: I removed the node_modules directory before taking this screenshot. You should have a node_modules dir.
- 64. Ok - time for UI Components material-ui.com $> yarn add material-ui@next material-ui-icons
- 65. An App Bar
- 66. Firebase Cloud Functions Example Meetup REST api using axios.
- 67. Configure Functions environment variables
- 69. Deploy
- 70. Trigger Function
- 71. Data Has Been saved
- 72. Make a ref trigger function
- 73. Curl the trigger again
- 74. If we modify our component
- 75. Get the code I have shown you here https://goo.gl/Gb61q9
- 76. Stuff I have yet to figure out How to properly unit test How to perform integration testing
- 77. Electron OAuth2 Future material: OAuth2 within Electron - beware the window management
- 78. Whats next? Finish features Write a guide book? Open Source code?
- 79. Credit Karma Eng Blog https://goo.gl/mF9PqM Jobs @ Credit Karma https://goo.gl/h1qn8a LinkedIn: https://goo.gl/CQDEr2 Twitter: @_krispy_