Introduction to Web Frameworks

Introduction to Web Frameworks
Introduction to Web Frameworks
Posted by on December 8, 2015 in Resources, Tagging the Tower

Part 1: Intro to Web Frameworks

Q: What is a Web Framework?
A web framework is a collection of software packages, libraries, and tools that allow you to build, publish, and serve things like web sites, web applications (e.g., Google Docs, Mint), or web services (e.g., RSS, Google Maps API).

Web frameworks include components such as a database server, http server, backend (server-side) components, and frontend (client-side) components. These pieces work together to listen for a web request (e.g., load Google Maps for a given address), process the request to figure out what to send back (server side processing), then send back data that a user can view and manipulate (client-side processing) like interacting with the google map.

Q: Why would I use a web framework?
Let’s say you want to build a web application that lets people interact with a database that you developed. A web framework will connect your database to web pages that allow people to view, interact, and maybe modify the data, and then serve it all over the internet.

Maybe you want to build a blog. You can use a hosted service like WordPress.com or the CUNY Academic Commons, or you can host your own blog. If you like using WordPress, you should probably use a service that’s already setup for you (including a paid web host). If you want more control over how the blog functions, you might want to try using a framework like Jekyll or Django, and then host it on GitHub or Heroku. These options let you build additional functionality into your blog, such as calendar applications, database interaction, etc.

Q: How do I get started?
The easiest way is to just start playing with different frameworks by following tutorials. I’ve put together a collection of basic framework tools on a virtual machine that you can use on your personal computer without worrying about breaking anything or getting stuck during the installation.

Part 2: The Virtual Machine

Basics

This virtual machine is essentially a computer that runs within your computer. It is set up to use Ubuntu 15.10, a linux distribution that is freely available on the internet.

It is emulating a computer with 2Gb of RAM and a 64-bit intel processor.

Login/username: ubuntu
Password: digitalfellows

Software
The virtual machine is preloaded with several software packages, including:

  • Node.js
  • Python
  • Ruby
  • Apache/MySQL/PHP (AMPPS)

It additionally contains a number of software package managers (npm, pip, rubygems) and software packages to support the demonstration web frameworks/applications, including the Yeoman and Cookiecutter generators for quickly scaffolding out new apps.

Yeoman: http://yeoman.io
Cookiecutter: https://github.com/audreyr/cookiecutter

Yeoman and Cookiecutter are tools that will set up the basic files needed for starting new projects using a combination of different software packages. For example, a Yeoman generator might bundle a web framework with prebuilt HTML or CSS packages to save you the trouble of having to set up the same configuration and template files every time you start a new project.

In this VM, yeoman and cookiecutter were used to install the following template packages:

Gulp: http://gulpjs.com/
Most of the demo projects use either Gulp to run various tasks. This tool runs various tasks, such as compiling your source code files, pulling in dependencies, and running a live server that watches for changed files then reloads your web browser to display the changes in real time.

Bower: http://bower.io/
Node.js/NPM: http://nodejs.org
Bower and NPM are both package managers that allow you to quickly and easily install various components that you can use in your project. They are really special because they can let you keep track of what you’ve installed, and the correct versions to use, so that you can share your project with someone else (say, on GitHub), without having to package all of those components with your project. This means that someone else who wants to work on your project can get all of the dependencies installed with a single command (e.g., npm install && bower install). And if you’re using a specific version of a package because the newest version got rid of a feature that you liked, npm and bower will keep track of the correct version for you.

AMPPS: http://ampps.com/

AMPPS is an integrated and semi-sandboxed (from default system servers) package containing the Apache web server, MySQL database server, PHP scripting language, Python scripting language, and several other packages to make your life easier.

When you launch AMPPS, you can immediately start the web and database servers using the graphical interface. When you launch the control panel (https://localhost/ampps), you can install various software packages, and basically administer the server in much the same way you might on a paid web server. The admin panel (https://localhost/ampps-admin) lets you configure AMPPS itself (e.g., what scripts are installed, etc.).

Some notes about AMPPS packages (taken from their website):

  • MySQL Data Directory : /usr/local/ampps/var
  • Web Root Directory : /usr/local/ampps/www (linked to ~/demos/ampswww)
  • MySQL Default Root Password is “mysql” and is stored here : /usr/local/ampps/ampps/data/my.conf
  • PHP Extension Directory : /usr/local/ampps/php-5.*/lib/extensions/ext
  • Change Apache, MySQL and PHP Configuration from AMPPS Application only.

 

Run AMPPS and install WordPress:

  • Launch AMPPS: ampps, password: digitalfellows
  • Click “start” under both Apache and MySQL, then click the “home” icon (if that doesn’t work, open Firefox and click the AMPPS bookmark)
  • Click on “WordPress” under the Blog category in the left-side menu
  • Click on “Install” tab
  • Accept the default settings and click the “Install” button at the bottom of the page

Django

  • start new project: yo vars-django
  • directory: cd ~/demos/vars-django-demo
  • setup: source varsdjenv/bin/activate
  • run: gulp --debug --serve --watch
  • view: http://localhost:3000
  • cleanup: deactivate

Flask

  • start new project: cookiecutter https://github.com/sloria/cookiecutter-flask.git
  • directory: cd ~/demos/flask-demo
  • run: python manage.py server
  • view: http://localhost:5000

Jekyll

Leaflet

Tags:, , , , , , , , , , , , ,
Keith Miyake is a graduate of the Earth and Environmental Sciences Program at the CUNY Graduate Center. His work crosses the fields of political economic geography, environmental justice and environmental governance, critical race and ethnic studies, American studies, and Asian American studies. His dissertation examined the institutionalization of environmental and racial knowledges within the contemporary capitalist state.

Related Articles

Skip to toolbar