2e:null 2f:["$","title",null,{"children":"An ES6 async/await Functional Programming Party | Adam Argyle | Observable"}] 34:[] 32:{"id":"0375f787a0f17422","slug":"an-es6-async-await-functional-programming-party","title":"An ES6 async/await Functional Programming Party","thumbnail":"2d852e9ee621de44ca9a00a9e2e57d749d315cb9de88f4786b0814a4a4aa6dbd","access_level":"public","create_time":"$D2018-02-25T03:29:27.330Z","update_time":"$D2018-04-22T04:10:25.737Z","view_time":null,"first_public_time":"$D2018-02-26T17:48:45.253Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"61ed3fa9c07b290c","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":"starter_2024","bio":"Google Chrome\n CSS DevRel 🥑; #VisBug creator; dev += designer; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, define, design, develop, deploy]); 🖖"},"version":1065,"publish_version":1065,"role":null,"authored":false,"authors":[{"type":"individual","id":"dca3ae47a0bd0fdd","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":null,"bio":"Google Chrome\n CSS DevRel 🥑; #VisBug creator; dev += designer; parentNode + 2 leafs; CSS/JS/UX addict; repeat(∞, [empathize, define, design, develop, deploy]); 🖖"}],"members":[{"type":"individual","id":"dca3ae47a0bd0fdd","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"An ES6 async/await Functional Programming Party","cells":[{"id":0,"value":"md`\n# An ES6 async/await Functional Programming Party\n\nFunctional programming and async/await aren't always the right tool for the job, but when the shoe fits, you truly can run faster and jump higher. I wanted to share a fun moment I had with ES6, and I think this medium is a really great way to walk y'all through it.\n\n### What We're Doing\nFetching data for bus routes from an ancient API & turning it into something meaningful, **an interactive map.** We'll be using the San Francisco [http://webservices.nextbus.com](http://webservices.nextbus.com) API. It returns XML for 1 route at a time.. We'll be pinging for routes then taking that data and making map pins on a Google Map. \n\n#### tldr; \na bus route app. \n\n### Ya ready!?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"md`\n

\n\n# Phase 1 :: Fetch & Map Data\nLet's make a **utility function** that will **fetch from our API and return XML**. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"async function fetchXML(params) {\n const REVERSE_PROXY = 'https://cors-anywhere.herokuapp.com/'\n const API_BASE = 'http://webservices.nextbus.com/service/publicXMLFeed?'\n const API_HEADERS = new Headers({'Accept-Encoding':'gzip, deflate'})\n \n try {\n let response = await fetch(`${REVERSE_PROXY}${API_BASE}${params}`, {headers: API_HEADERS})\n let text = await response.text()\n let xml = await (new window.DOMParser()).parseFromString(text, 'text/xml')\n return xml\n } \n catch(e) {\n console.error(e)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`\n**Let's try it!**\n\nLet's ask for the N route:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"(await fetchXML(`command=vehicleLocations&a=sf-muni&r=N&t=0`))\n .getElementsByTagName('vehicle')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`\nHehe XML, you're not DOM. But I'll query you anyway. \n\n
\n### Incoming Emergent Feature Requirement!\n\nWe need to support the selection and visualization of multiple bus routes. What oh no, I thought we'd only show 1 at a time! \n\n**Have no fear, Promise.all is here.** Let's leverage async/await to fetch all the desired routes in an array **in parallel**. Lucky for us, that's **no sweat for promises and async/await.** We'll turn each route name into a fetch promise, drop each of those fetches into a Promise.all(), then just **await that top level promise of promises**. \n\n**Let's write a function!**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"function fetchInParallel(routeArray) {\n return Promise.all(\n \trouteArray.map(route => \n fetchXML(`command=vehicleLocations&a=sf-muni&r=${route}&t=0`)))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md`\n**Let's try it out!**\n\nLet's ask for 2 routes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"fetchInParallel(['M', 'N'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`\n### Parallelism, pshhh\n
\nThanks to Promise.all we can fetch XML in parallel now. But XML isn't very convenient and Google Maps doesn't want that. Map markers need to be **javascript objects**, so I guess we'll have to write another function.. maybe even use **map/filter**.. 😎\n\n**Hooray, another function!**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"function makeMarkers(routesAndVehiclesXML) {\n return routesAndVehiclesXML\n .filter(xml => xml.getElementsByTagName('vehicle').length) // filter out any empty routes\n .map(route => route.getElementsByTagName('vehicle')) // map each route to vehicles\n .map(vehicles => Array.from(vehicles).map(vehicle => ({ // map each vehicle to a map pin object\n label: vehicle.getAttribute('routeTag'),\n position: { \n lat: parseFloat(vehicle.getAttribute('lat')), \n lng: parseFloat(vehicle.getAttribute('lon')),\n }\n })))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"md`\n**This function does a ton and makes it look easy.** It takes the XML of routes and the vehicles on those routes, removes any empty routes, extracts a new array of just the vehicles from each route, then maps each vehicle and it's data to that of a google maps marker. \n\nTurns out, we just need latitute and longitude for a marker, but we'll add the route tag so our users know which pin is for what route. Aren't we nice?\n\n**Let's test out our function!**\n\nWe'll send in 3 different routes:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"makeMarkers(await fetchInParallel(['N','M','KT']))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"md`\nBooyah, map pins. We're handling multiple requests for routes like a boss, and serving up markers like In-and-Out Burger. 👍\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"md`\n

\n# Phase 2 :: The Map\n**Step 1:** We need a DOM node to hold an interactive Google Map. \n\n**Let's make a function!**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"function makeMap() {\n return html`\n

\n loading... check for red in step three, may need to hit play\n

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`\n**Step 2:** Load GoogleMaps JS API\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"GoogleMaps = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyAdGbERELhZgeTJUAXe9UaRZUDU4B9R3A0').catch(() => window.google.maps)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`\n**Step 3:** Use the Google Maps Javascript API to create a new map inside of our named node. I need to create GoogleMap instances, they're the reference needed for the markers. Sooooooo\n\n**Let's make a function!**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function makeGoogleMap($map) {\n return new GoogleMaps.Map($map, {\n zoom: 13,\n center: {\n lat: 37.7680445,\n lng: -122.439697,\n },\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`\n**Let's try using our functions**\n\nWe'll make a map node, then put a Google Map inside of it:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"SanFrancisco_Map = {\n let $map \t\t\t = makeMap()\n let mapInstance \t= makeGoogleMap($map)\n \n return $map\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`\nIt works! We have a map with a nice js api ready for puppeting.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`\n

\n# Phase 3 :: Put Data On The Map\n## Armed & ready with functions, what now?\nWe have functions for **our data**, we have functions for **our maps**... \nwe can put it all together!\n\nGuess what..\n\n**Let's make a function!**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"async function showRoutesOnMap(routes) {\n const $map \t\t\t = makeMap()\n const mapInstance \t= makeGoogleMap($map)\t\t\t // show a map while we're loading data\n const xmls \t\t\t = await fetchInParallel(routes) // fetch data as efficiently as possible\n const markers \t\t = makeMarkers(xmls) \t\t\t // maps our xml to markers for GoogleMaps\n \n // added zest, stagger animate them dropping in\n markers.forEach(markers => \n markers.forEach((marker, i) => \t\t\t\t\t // map objects to markers\n window.setTimeout(() => { \t\t\t\t\t\t // offset creation to create animation\n new GoogleMaps.Marker(Object.assign(marker, { \t// decorate marker with map and animation\n map: mapInstance,\n animation: GoogleMaps.Animation.DROP\n }))\n }, i * (500 / markers.length)) \t\t\t\t\t // stagger evenly across 500ms\n ))\n \n return $map\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"md`\n**Let's try it out!**\n\nThis time, we'll use some ObservableHQ magic to take some user input via a multiselect, and fetch those routes and put them on the map.\n\n# Demo Time\n### Pick a route!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"viewof UserInput = {\n const multiselect = html`

\n\t\n

`\n \n multiselect.querySelector('select').oninput = ({target}) =>\n multiselect.value = [...target.options]\n .filter(option => option.selected)\n .map(option => option.textContent)\n \n multiselect.value = ['N', 'KT']\n \n return multiselect\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"showRoutesOnMap(UserInput)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"md`\n

\n# Wrapping Up\nWrangled that mess pretty good with a few functions and some sweet ES6 sugar. Our map is coming along. From here I'm sure your imagination could go wild with possibilities. In fact: \n\n## Fork this and do it your way! I'd love to see your take on it.\n
\nI hope you enjoyed the FP ride and learned something new. Maybe even found a place in your heart for XML, the DataArray/DOM/Thingy. 🤪\n\nLet me know if you liked it on Twitter [@argyleink](https://twitter.com/argyleink)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 33:"$32:body"