If you've ever wondered what tools and technology powers the Geoshen website, then you're in luck because I'll be going over that in this post. If not, well, since you're here now anyway, might as well read on right? There's actually already a page that gives a brief overview of the website's tech stack, but this post will provide deeper coverage.

First, a primer. In web development, there are two main parts to every web page/app, and they're known as the front-end and the back-end.

The Front-End

The front-end deals with code involved with the design and experience of the interface, that is, what you the user see and interact with on a website such as the content, links, buttons, and controls. For this reason, front-end development is closely tied with web/ux design. It's the job of the front-end developer to use code to create usable interfaces from a designer's static mockups and wireframes. The front-end developer is like the engineer who focuses on the technical and structural details; the web/ux designer is like the architect who focuses on the artistry and usability.

They work closely together to ensure that the web interface looks and feels good to use, or is at least built to a spec that someone had approved. The front-end developer and web/ux designers are often specialized positions in many companies, but since their roles are so intertwined, it's not uncommon for a person to have the skillset to do both the front-end coding and designing (such as in one person operations like Geoshen).

Everything you see and interact with in the browser is built using HTML, CSS, and JavaScript. However, a front-end developer might also use supersets of those languages that compiles down to plain HTML, CSS, or JavaScript rather writing them directly. That's because supersets offer a more effective and efficient development experience, that is, a more organized and maintainable codebase with fewer bugs.

At Geoshen, we use Handlebars to help write our HTML. Handlebars has nifty features like partials, iterators, conditionals and custom helpers. For our CSS, we use SASS (or SCSS), which has helpful features like variables, maps (hashes), mixins, nesting, and imports. As for our JavaScript, we use ES6, which isn't a superset of JavaScript but is actually one of the newer versions of JavaScript packed with features that aren't all supported yet in every browser, so developers have to use a compiler like Babel to convert ES6 to browser-compatible JavaScript.

So you might also be wondering how developers convert Handlebars code to HTML or SASS to CSS or ES6 to browser-friendly JS. We use something call a build system or a tool that functions like one at least. The most popular front-end end tool for that is currently Webpack, which is actually a module bundler that can be used to compile code. We don't use Webpack at Geoshen, but we're seriously considering making the switch. At the moment, we use Gulp (4.0), which does the job of compilation well enough but doesn't have cool features like hot-module reloading for JavaScript, that is, the ability to alter your JavaScript and see the changes reflected in the browser without the need to refresh the page.

That might sound trivial since page refreshes usually take no longer than a few seconds. But it's not uncommon for developers to refresh their browser hundreds of times a day during development, which means those few seconds can really add up.

Web developers and programmers in general spend a lot of time writing code . But it'd be a waste of time to write code to solve problems that other people have already solved. It's common in programming to use pre-written code called libraries to speed up the development process or to do things that you can't do yourself. For example, we use the Mapbox GL JS library to power our dynamic maps, something we wouldn't be able to do if done from scratch. Other libraries like jQuery and Lodash offer a lot of convenience methods to enable developers to write less verbose and more expressive code, that is, code that's more intuitive and readable.

We won't go over every single one of the libraries used on Geoshen, because there's just too many to list. Instead, we'll just list a few of our most used ones, that is, libraries we find ourselves using again and again in different parts of the website. These include jQuery, Lodash, Mapbox GL JS, Swiper JS, Scrollama, and D3 (not Diablo 3).

The Back-End

While the front-end deals with the web interface that you would interact with, the back-end is concerned with the server and anything that communicates data between the browser and the database. So the back-end usually has 3 main parts: the application, the database, and the web server. The application is any code that takes input from user action and stores that data in a database. The web server handles requests from the browser and determines what kind of data or file to send back.

For example, lets say you want to create a user account on a popular social media website. After you submit your information through a form, the front-end code tells the back-end application to take your data and do something with it. In this case, the application will verify that the information you've submitted is valid (such as whether your username is unique or if your passwords match). If your information is valid, the application will then initiate a network request to a web server, telling it to take your data and store it in a database.

Unlike the front-end, where code is strictly limited to HTML, CSS, and JavaScript, the back-end has much more variety when it comes to programming languages. Popular programming languages for back-end development include PHP, Ruby, Python, and Java. At Geoshen, we actually use a version of JS designed for the back-end called Node. We chose Node because it has a mature ecosystem and enables code reuse between the front-end and back-end since it's just JavaScript end-to-end. We also use a small framework called Express to help us scaffold our back-end code. Although it's not as feature rich as some larger frameworks like Sails JS and Meteor JS, the smallness of Express gives us a lot more flexibility, which we highly value here as Geoshen.

We store our content using a combination of static JSON files and a database called MongoDB. Ideally, we want to store somewhere close to 100% of our content in a database like MongoDB, but at the moment Geoshen's content management system interface is still pretty rudimentary. It would require much more work to get our CMS up to a level you'd expect from a CMS like Wordpress, but we do not currently have the resources to do that (maybe you can help?) since Geoshen is a one person operation with no outside funding. That's not to say we're not going to make to try. It's just an ongoing process.

As for our web server, we actualy just offload all that work and configuration to a platform called Heroku. Dealing with web servers can be tough work especially if you don't have enough brain juice left over from juggling with front-end and back-end code. So it's much easier for us to just pay a small monthly fee and have Heroku deal with all the web server related.

Summary



Ok, so here's a summary of the current tech stack at Geoshen:

Of course, this is just a snapshot in time of our tech stack. Web development tools come and go, and we'll be sure to stay on top of them so that we're using the best tools we can to help create more the content you enjoy here at Geoshen. Once we think our tech stack has changed enough, we'll write up another one of these posts to keep you all updated.