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 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).
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).
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.
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.
Ok, so here's a summary of the current tech stack at Geoshen:
|JS libraries||jQuery, Lodash, Mapbox GL JS, Swiper JS, Scrollama, D3|
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.