Project Update

by Max Nelson on October 11, 2017

Project Update

So I have recently embarked on a project which has required me to learn a lot of new web technologies / frameworks / libraries (all words for essentially the same thing), and I thought it might be useful for myself to recall and record the course of my learnings over the past couple weeks, and possibly it would even be useful for someone else to read this.

My new project relies on a number of web technologies that, for various reasons I have been ignorant towards thus far. The main reason is that at my job of the past 4 years (which I left 2months ago) I worked within a very narrow and isolated framework / web platform called AEM. I learned a lot about the AEM stack, which included things like Apache Jackrabbit, JCR, Java, etc. But in my studies of these technologies I became ignorant of the new cool Javascript libraries that everyone was talking about, some of which I found already present in the project I was to set about working on. So I began work on familiarizing myself with these libraries, it was exciting as these were words I’d heard thrown around a lot in conversation with web developers, and had been intimidated by, as these were not technologies I was familiar with. I am now familiar with them and they no longer scare me, so let me list my understanding of these things.

Javascript Modularization Libraries: RequireJS, CommonJS, AMD, UMD, ES6 (Harmony, 2015)

All of the words above are names of libraries/frameworks that pretty much do the same thing, they provide functionality for modularizing your javascript code. I had no real idea what this meant until I did a deep dive on the subject and discovered that javascript modularization is basically a best practice sort of thing when dealing with projects with lots of javascript files (100+). Like any highly scalable technology, it may not make sense to use these things when working on smaller projects and can cause undue headaches for unweary developers. That said, understanding them is nice and gives you a warm fuzzy feeling. Basically these are all just slightly different ways of wrapping up your javascript code and allowing you to include/exclude modules from their dependancies. They solve things like dependency issues; global namespace conflicts / exposure, and generally allow for cleaner more manageable code in a large-scale environment. Having read about all the options out there, ES6 stuck out as the best option, as it is going to become the de facto standard after all.

Data Visualization: D3

Up till now I had had some limited exposure to D3, I knew what it was but hadn’t really explored it’s inner workings, so my second task on my javascript curriculum was to deep dive directly into D3. From this, I learned how surprisingly simple the library is, it essentially contains functions that intake numbers and then displays those numbers, according to a given scale, specified or designated by the developer, the scale/range declaration is where much of the magic happens, and essentially serves to transmute the given numbers into visually pleasing charts that look cool when displayed in a web browser. Of course I got a better grasp on SVG syntax, and the enter, update, exit pattern that is idiosyncratic to D3, but it is a lovely library and I look forward to working with it in the future. Bonus: version4 uses ES6!

Sending Email Programmatically: Google App Engine, SendGrid, Mail command

This one has a lot to unpack, and there is a lot going on that I only skimmed the surface of, but I did learn just how easy it is to send Email programmatically from either the command line, or within a project (same thing really). To get my mail a-sendin’ I learned about the ‘mail’ command in Terminal, which itself is really simple, it becomes a bit more complicated when one must establish one’s email address / application as a trusted sender, but that simply required me to adjust some of the DNS records on my domain. Specifically the SPF and DKIM records. Adding the necessary records, combined with configuring my email within my application (Google App Engine), as well as some system files in OSX, proved successful and I am now sending emails successfully based on user input.

Python Virtual Environments: Virtualenv, Virtualenvwrapper

In my previous work, we used a Java-based framework, and relied on Maven to handle dependencies while working locally. In this new project, I am using Google App Engine and Python, which means I must manage dependencies myself. Previously I had done this by pip installing libraries directly into my ‘/Library/…’folder (the default global directory). But now with multiple projects running on my machine, I am quickly discovering the usefulness of installing packages locally. Luckily, the tools for this are relatively simple and include the ‘virtualenv’ and ‘virtualenvwrapper’ tools, which do the pretty straightforward work of configuring a ‘lib’ directory inside your project and adjusting the necessary variables ($PATH, etc. ) so that commands run from within the directory, route to the appropriate location.

Firebase Authentication: Firebase.Auth

One thing I spent a long time doing in one of my previous ‘fun’ projects was learning all about the Oauth2 dance, the exchange of access tokens for credential objects, Login flows, etc. luckily at that time I was using Google App Engine and the process was made slightly easier by using their builtin Oauth2 library. Even luckier, this time around I decided to explore the idea of Firebase for authentication, and have thus far been very pleased with how easy I was able to configure a working login system, incorporating the major federated login providers (Google, Facebook, Twitter). It took me no more than a couple hours to set up and configure their example project, and while I am still familiarizing myself with their API, I am so far very happy with their library, and its integration with Google App Engine.

Well that’s it for now folks. There are several other subjects and ancillary libraries that I skimmed the surface of, including JS Bundlers such as: Gulp, Rollup, etc.. At my old work we used Grunt so I am actually fairly familiar with the concepts involved, but I look forward to discussing these topics, and more, in my next weekly blog post.