The API Challenge

The internet of today is built on web APIs. If you are unfamiliar with the concept you should check out the definition on Wikipedia. In essence, APIs facilitate the creation and consuming of data. Most of them are RESTful and use JSON.

There are many different ways to code an API. A backend could be PHP or Node.js/Express or .NET WebAPI or a number of other implementations. Data is stored in a persistance layer, usually a relational database, and there are just as many flavors of DBs as there are backend solutions.

This got me thinking about a challenge I could set for myself: Develop the same API in as many different backends as possible with my current knowledge. Here are the broad strokes:

An imaginary company named Book-Bound is looking to create an internal-use application & API for managing books and authors. They have asked you, their lead developer, to design a prototype with multiple backends so they can decide on the technology they would like to use.

  • Create a RESTful API that provides JSON
  • The API should have CRUD endpoints for books and authors
  • The base URL should be http://localhost:3000/api
  • No security, authorization or SSL is necessary

Challenge accepted!

For the frontend application I am going to use Angular CLI and Bootstrap 4, specifically ng-bootstrap. Ng-Bootstrap removes my dependency on jQuery and popper.js while gaining access to some nice features like TypeAhead. Using Angular gives me a chance to use my new ng-idle libraries for reactive forms and http services.

Initially, for frontend development, I could use the angular-in-memory-web-api but it has the limitation of running on the same url base as your application. For example, you can only make calls to ‘api/books’ not ‘http://localhost:3000/api/books’. I think I might go this route and store the endpoint url in an environment variable. That way I could run the application on StackBlitz.

Using the angular-in-memory-web-api might be an after thought. For more rapid development I will probably use JSONย Server. It will run on a specified port and is simple to set up. Just point it at a JSON file and it handles everything. A quick look through the code and you can see that it is Node.js/Express under the hood. No matter how it works, json-server will be our first official backend API.

Then I will create additional APIs using Node.js/Express & MongoDB, ASP.NET Core 2 & SQL Server LocalDB, and finally ASP.NET MVC5/WebAPI & either LocalDB or SQLLite. Both ASP.NET projects will use Entity Framework DbMigrations for easy db setup and change tracking.

So that will be my answer to the challenge. An Angular frontend that doesn’t care where the data is being persisted, and APIs built on the following technology:

  • JSON Server & JSON files
  • Node.js/Express & MongoDB
  • ASP.NET Core 2 & SQL Server LocalDB
  • ASP.NET MVC5/WebAPI & SQLLite

All code will be available on my GitHub. I will update this post with links to posts about each implementation.

List of Global NPM Packages with Versions

Let me start out by giving you the command to list all your globally installed npm packages:

npm list -g --depth=0

And now for the backstory:

The other day I was trying to install a JavaScript linter in VS Code. After looking through the extensions, I decided to use ESLint since it was the most popular. I downloaded and installed the extension, following the instructions to install ESLint globally using npm.

VS Code had to reload once it was installed and I recieved an error loading ESLint. The error said I was missing the eslint-react-plugin package.

Okay.

But I was just wanted ESLint for my JavaScript files. I relented and installed this new package globally. After restarting a third time, ESLint failed to load again because it needed yet ANOTHER package! I had enough. I went into VS Code extensions, uninstalled ESLint, and installed JSHint. It too needed me to install jshint through npm but then it started working immediately.

The only problem is that I had installed a number of packages for ESLint. I couldn’t remember the exact names at this point and my terminal history was erased from restarting VS Code.

I needed a listing of my globally installed npm packages. So I issued the command from the beginning of this article. This gave me a nice list of all my global npm packages along with their version. I finally issued an npm uninstall command on the ESLint packages and moved on with my life.

Maybe I will revisit ESLint one day if I start getting into React.

The npm list results look something like:

C:\Program Files\nodejs
+-- @angular/cli@7.2.2
+-- angular@1.7.5
+-- jshint@2.9.7
+-- json-server@0.14.2
+-- npm@6.4.1
+-- rxjs-tslint@0.1.6
+-- source-map-explorer@1.6.0
+-- tslint@5.12.0
`-- typescript@3.2.4

EDIT: After doing some ES2015 & ES6 coding using JSHint, I might have to switch over to ESLint. None of the new ECMAScript features are recognized by JSHint! ๐Ÿค”

Hello World

I recently read a tweet that suggested you should blog about what you’re learning. It reinforces and transmits your knowledge….

I recommend blogging about what you’re learning because it’s like teaching. Teaching allows you to truly grasp the ins and outs of a topic and retain information more easily. You’re feeding yourself by feeding others- what’s better than that?๐Ÿง ๐Ÿ”Œโ€” ๐ŸƒPariss Athenaโš”๏ธ (@ParissAthena) January 23, 2019

Since I’ve been learning so much as of late, I decided to take this advice to heart. This blog will be my new respository of knowledge on topics from C# to Angular to JavaScript to Raspberry Pi to whatever else I will surely get into. It is also a good place showcase my skills with a portfolio of projects.

My goal is to write at least one article per week. This shouldn’t be difficult considering the amount of time I put into my education. Look at this as the arduous task of “documentation”. Most programmers don’t like it but it is necessary.

So check back weekly to see my progress. I’m sure my writing skills will improve over time as well. ๐Ÿ’พ