ApiBlaze: Development Phases

Inception

Prototype

  • Backend: Parse API spec and provide an optimized, internal datamodel for searching
  • Frontend: Dispatch and process WebSocket requests for searching in the internal datamodel
  • Frontend: Display search results in a popup
  • Frontend: Display description and referenced request/response datastructure of the selected element
  • Backend: Introduce the concept of clients, store client ID and currently selected API
  • Frontend and Backend: Search and select different OpenAP specification
  • Frontend: Switch search mode between properties, objects and endpoints, and render search results visually different
<section class="search-wrapper">
<h2>Search</h2>
<div class="input-wrapper">
<input type="text" id="query" value="" spellcheck="false" />
</div>
...
</section>
$query.focus()function addCollapses($container) {
...
}
$query.addEventListener('input', event => {
let value = event.target.value
search();
})
socket.on('results', results => {
renderResults(results)
})
function copy(text) {
...
}
$query.addEventListener('keyup', resultsKeyControl)
$query.addEventListener('focus', resultsFocusCheck)
$query.addEventListener('blur', resultsFocusCheck)

Modularization

import { handleApiSearch } from '../controller.js'let state = {}
let _$root = undefined
function updateState (newState) {
state = { ...state, ...newState }
}
function getState () {
return state
}
function render (args) {
const html = `
<h2>Load an API</h2>
<input type="text" class="api-search-bar" id="api-search-bar" value="" spellcheck="false">
<div id="api-search-results" class="api-search-results"></div>
`
return html
}
function mount ($root, ...args) {
_$root = $root
$root.innerHTML = render(args)
document
.getElementById('api-search-bar')
.addEventListener('keyup', e => handleKeyup(e))
}
function refresh (args) {
mount(_$root, args)
}
function handleKeyup (e) {
console.log(e)
const keyword = e.target.value
handleApiSearch(keyword, updateState)
}
export { mount, getState, refresh }

Framework-Based Design

import { Component } from 'spac'import SearchApiAction from '../actions/SearchApiAction.js'export default class SearchBarComponent extends Component {
render = () => {
return `
<input type="text" id="api-search-query" value="${this.getState()
.apiSearchQuery || 'Kubernetes'}" spellcheck="false">
`
}
mount () {
super.mount()
document
.querySelector('#api-search-query')
.addEventListener('keyup', e => this.handleKeyUp(e, this))
}
handleKeyUp (e) {
e.preventDefault()
this.updateState({ apiSearchQuery: e.target.value })
his.triggerSearch()
}
async triggerSearch (e) {
const apiList = await new SearchApiAction().run()
this.updateState({ apiList })
}
}

Conclusion

--

--

--

IT Project Manager & Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Module Gems For The NPM Junkie

The Internals of Node.js

Why there is a difference in behavior for copying contents in primitive and non primitive type?

Featherlite Vision Unveiled — V 0.1.22 — Codenamed TNT

SEO in Angular with SSR — Part I

Conditional Rendering In React

Flux and Redux

Airbnb Coding Interview Questions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sebastian

Sebastian

IT Project Manager & Developer

More from Medium

NodeJS: What and Why?

Start Unit Testing Your Javascript with Jest

< Lets Git to it >_

Have you heard of Application Frameworks…?