Difference between revisions of "Web Frameworks"

From CSE330 Wiki
Jump to navigationJump to search
Line 1: Line 1:
−
So far in this class, you have been using PHP to run your web site.  You may have found that PHP can become burdensome when you are writing complex applications, and it can be hard to use for collaboration.
+
So far in this class, you have been using PHP, HTML, and now JS to run your web site.  You may have found that PHP can become burdensome for larger applications and difficult to use in collaboration.
  
−
Web Frameworks are an alternative method for writing web applications.  Web Frameworks are designed to make the experience for the developer more elegant and increase the possibilities for collaboration.
+
Web Frameworks are an alternative method for writing web applications.  Frameworks exist to make writing code more maintainable, scalable, as well as to introduce base functionality for the application you make.
  
−
There are ''hundreds'' of Web Frameworks out there.  We have chosen three of the more popular frameworks to write about in this article.  If you want to use a different framework, there is a section at the end telling you what to look out for.
+
There are ''hundreds'' of frameworks available.  We've categorized and listed some of the more popular below to help you decide what's right for your application.
  
−
== Web Frameworks vs. Content Management Systems ==
+
== Common Features of Frameworks ==
−
 
 
−
When talking about Web applications, you may hear the terms ''WordPress'', ''Drupal'', or ''Joomla''.  These are '''content management systems''', or CMSs.  A CMS is a pre-built "canned" web application that works with minimal configuration.  Most CMSs have user accounts, blogging, shopping carts, and other common idioms right out of the box.  The big weakness of a CMS is that it lacks fine tuning and customization.  CMSs are most appropriate for individuals who do not know how to program a web site.
 
−
 
 
−
Web frameworks give you all the power you need to customize your web application.  Most major web sites are built using web frameworks; very few use a vanilla CMS.  You're a future computer scientist or engineer at an elite institution, and after this course you will have the background you need to build applications using a web framework instead of a CMS.
 
−
 
 
−
[[File:CMS-vs-Framework.gif]]
 
−
 
 
−
== Common Features of Web Frameworks ==
 
  
 
=== Routing ===
 
=== Routing ===
Line 21: Line 13:
 
In PHP, if you went to an address like http://www.example.com/welcome.php then Apache would run the script located at, for example, ''/var/www/html/welcome.php''.
 
In PHP, if you went to an address like http://www.example.com/welcome.php then Apache would run the script located at, for example, ''/var/www/html/welcome.php''.
  
−
However, frameworks do ''not'' generally work the same way.  This is in part because of the MVC architecture.  Most frameworks use a ''router'' instead that routes arbitrary URLs to controllers.  Scripts are never "loaded" directly through Apache.
+
With routers, however, you can set arbitrary URLs to run different controller files.
−
 
 
−
Here is a sample router file from a Ruby on Rails web application so you can get an idea of how it works:
 
−
 
 
−
<source lang="ruby">
 
−
# Ruby on Rails Routing Example
 
−
MovieNews::Application.routes.draw do
 
−
  resource :session, only: [:new, :create, :destroy]
 
−
 
 
−
  resources :users
 
−
 
 
−
  resources :movies do
 
−
    resources :reviews
 
−
  end
 
−
 
 
−
  root to: "movies#index"
 
−
  get "released-movies" => "movies#index", as: "released_movies"
 
−
  get "signup" => "users#new", as: "signup"
 
−
  get "login" => "sessions#new", as: "login"
 
−
  get "logout" => "sessions#destroy", as: "logout"
 
−
end
 
−
</source>
 
−
 
 
−
'''Important Word of Caution:''' This means that you should not save your framework source code in a directory that Apache serves!  For example, if you put your Django site in ''/var/www/mydjango/'', people could navigate via their web browser to ''example.com/mydjango/'' and see all of your source code, including sensitive business logic and passwords!  '''Do not make this mistake.'''
 
  
 
=== Less Code ===
 
=== Less Code ===
  
 
Frameworks are designed to separate your application logic from your HTML and CSS.  In fact, most web frameworks automatically generate all of the HTML and CSS that you need.  So, you could write a fully functional (albeit bland-looking) web site in a Web Framework without writing a singly line of HTML or CSS!
 
Frameworks are designed to separate your application logic from your HTML and CSS.  In fact, most web frameworks automatically generate all of the HTML and CSS that you need.  So, you could write a fully functional (albeit bland-looking) web site in a Web Framework without writing a singly line of HTML or CSS!
−
 
−
=== Object-Relational Mapping ===
 
−
 
−
Many Web Frameworks use an [[wikipedia:Object-Relational Mapping|object-relational mapping]] paradigm for communication with the database.  What this means is that instead of writing SQL queries, you call methods on objects instead.  For example, the following snippet of code in Ruby on Rails loads a certain user out of the database and changes their nickname:
 
−
 
−
<source lang="ruby">
 
−
# Ruby on Rails ORM Example
 
−
u = User.find_by_username("alice")
 
−
u.update_attributes(
 
−
  nickname: "Ali"
 
−
)
 
−
</source>
 
  
 
=== MVC Architecture ===
 
=== MVC Architecture ===
Line 84: Line 41:
 
# The final view is sent to the user.
 
# The final view is sent to the user.
  
−
== Some Popular Web Frameworks ==
+
== So what do I do? ==
  
−
=== Django ===
+
=== Front-end Frameworks ===
 +
=====React=====
 +
Get started [https://reactjs.org/docs/getting-started.html Here]
  
−
'''Django''' is an open source web development framework that uses Python as its programming language.
+
We recommend cloning as a starting point [https://github.com/facebook/create-react-app/ Create React App]
  
−
Django uses object-relational mapping for interacting with the database. It also uses an MVC architecture; note that Django calls the Controller the ''view'' and the View the ''template''.
+
React is the most popular front end framework. React uses JS to create HTML (JSX), as opposed to updating HTML with JS. This makes manipulating the DOM more efficient and smoother.
  
−
Because of Python's large following outside of the realm of web development, there are more general-use libraries available for Python than there are for a language like Ruby.  As such, Django is great for sites that require complex server-side operations.
+
=====Vue=====
 +
Get started [https://vuejs.org/v2/guide/ Here]
  
−
We will be using Django as the standard web framework for Module 5.  We made this choice because of the fact that Django runs on Python.
+
Really good happy medium between React and Angular. Not fully contained, but separates/organizes your code very nicely. Don't have to use JSX or Angular specific methods. Code structure is better organized than React, but not as opinionated as in Angular.
  
−
==== Django Resources ====
+
Vue is partnered with PHP Laravel so a lot of the integrations are very code-friendly.
  
−
* [https://www.djangoproject.com/ Official Web Site]
+
=====Angular=====
−
* [https://docs.djangoproject.com/en/1.4/ Django Documentation]
+
Get started [https://angular.io/guide/quickstart Here]
  
−
==== Notable Sites using Django ====
+
Not to be confused with Angular.js (the old version), Angular is the Google developed front-end framework that competes with React and Vue. Angular has it's own more opinionated code practices, making it easy for developers to understand but a higher initial learning curve.
  
−
* [http://www.washingtontimes.com/ The Washington Times]
+
=== Back-end Frameworks ===
−
* [http://www.mozilla.org/ Mozilla]
+
=====Express (NodeJS)=====
−
* [http://www.pbs.org/ PBS]
+
Get started [https://expressjs.com/en/starter/generator.html Here]
−
* [http://instagram.com/ Instagram]
 
  
−
=== Ruby on Rails ===
+
If you're planning on using a NodeJS backend, Express is a great option. Other options include [https://hapijs.com/ Hapi.js] or [https://koajs.com/ KOA] if you're already familiar with Express and want to try something else.
  
−
Ruby on Rails, or just '''Rails''', is an open source web development framework that uses [[wikipedia:Ruby (programming language)|Ruby]] as its programming language. Ruby is similar in syntax to Python, and it was chosen for Rails because of its elegant syntax and adaptability.
+
=====Laravel (PHP)=====
 +
Get started [https://laravel.com/docs/5.8 Here]
  
−
Rails uses ActiveRecord, an object-relational mapping library, to communicate with its database back-end. Rails also employs an MVC architecture.
+
Laravel is certainly the most popular PHP back-end option. If you aren't sure you want to venture over to a Node, Python, or other back-end, I urge you to try Laravel instead of vanilla PHP. Super clean, super simple, genuinely makes writing PHP enjoyable. As mentioned above, it's coupled extremely well with Vue.js, I would recommend searching for tutorials of the two together if that's the approach you'd like to take.
  
−
One feature of Rails that differentiates it from other frameworks is its concept of ''database migrations''. Whenever you need to change your database schema, Rails lets you do so by generating a ''migration''. In tue future, if the change wasn't what you wanted, your solution is easy: just rollback the migration.
+
=====Django (Python)=====
 +
Get started [https://docs.djangoproject.com/en/2.1/ Here]
  
−
Rails is great for web sites that follow a typical web design pattern: for example, blogs, e-commerce, and news sites.
+
Django's tagline is "The Web framework for perfectionists with deadlines". Take that as you will.
  
−
==== Ruby on Rails Resources ====
+
Django is a fairly opinionated full-stack framework, meaning both your front-end and back-end will be written and handled by Django (as opposed to, say Express, which can integrate with whatever sort of front-end you'd like). This doesn't mean it's more difficult to learn, but it does kind of force you to learn how Django does its front-end and back-end which is why it counts for both in terms of points.
  
−
* [http://rubyonrails.org/ Official Web Site]
+
=====Flask (Python)=====
−
* [http://guides.rubyonrails.org/ Guides and Tutorials]
+
Get started [http://flask.pocoo.org/ Here]
−
* [http://api.rubyonrails.org/ Rails Documentation]
 
−
* [http://railscasts.com/ Rails Screencasts]
 
−
* [http://www.ruby-lang.org/en/documentation/quickstart/ Ruby Tutorial]
 
  
−
==== Notable Sites using Ruby on Rails ====
+
Flask is a micro back-end framework and is extremely easy to setup. Unlike Django, Flask won't handle your Front-end for you. This leaves you the option to use any of the recommended front-end frameworks or to just use regular HTML/JS.
  
−
* [http://twitter.com/ Twitter]
+
=====Bottle (Python)=====
−
* [https://github.com/ Github]
+
Get started [https://bottlepy.org/docs/dev/ Here]
−
* [http://www.groupon.com/ Groupon]
 
−
* [http://www.yellowpages.com/ YellowPages]
 
  
−
=== CakePHP ===
+
Same gist as Flask, just an alternative.
  
−
If you want to stay in the familiar land of PHP, '''CakePHP''' is an open source web framework similar to Ruby on Rails and Django but written with PHP instead of Ruby or Python. Almost everything in CakePHP takes advantage of the object-oriented power of PHP5 to make development more agile.
+
=== Other and Database Info ===
 +
=====MongoDB=====
 +
Get started [https://docs.mongodb.com/manual/ Here]
  
−
CakePHP uses object-relational mapping for database interaction, as well as an MVC architecture.
+
MongoDB is a very popular no-sql based database. It may seem like a hassle to learn another type of database querying, but as soon as you realize you don't have to mess with foreign keys and it's all essentially javascript objects, it becomes a pretty attractive option. They also have free cloud databases now which is awesome because you don't have to worry about hosting a database on your computer, but much of the security is handled on their end.
  
−
CahePHP is great for small or large web sites that can benefit from using a language that you already know.
+
=====Firebase=====
 +
Get started [https://firebase.google.com/ Here]
  
−
==== CakePHP Resources ====
+
Firebase is another cloud-based no-sql option. Firebase provides everything from the database itself to real-time crash reporting and analytics. Very easy to integrate into your app and get started with.
  
−
* [http://cakephp.org/ Official Web Site]
+
=====Other SQL=====
−
* [http://book.cakephp.org/2.0/en/getting-started.html Getting Started Guide]
+
[https://www.postgresql.org/ PostgreSQL]
−
* [http://api20.cakephp.org/ Documentation]
 
−
* [http://phpmaster.com/speeding-up-your-cakephp-websites/ CakePHP Performance Optimization]
 
  
−
==== Notable Sites using CakePHP ====
+
[https://mariadb.org/ MariaDB]
  
−
* [http://www.store-locator.com/ Store-Locator.com]
+
=== Structuring Your Project ===
−
* [http://www.cdrecyclingcenter.com/ CD Recycling Center of America]
+
Once you've outlined your project and have chosen what languages and frameworks you'd like to use, knowing where to start can be a bit daunting. We recommend a straightforward file structure similar to the following:
−
* [http://www.wipe.com.ar/ Wipe Buenos Aires]
 
  
−
== Other Web Frameworks ==
+
<source lang="bash">
 +
client/
 +
server/
 +
config/
 +
entrypoint
 +
</source>
  
−
Beyond Rails, Django, and CakePHP, there are hundreds, if not thousands, of web frameworks.  Here are some things to keep in mind when choosing a framework:
+
Depending on what frameworks you're using, it's easy to just place your full front-end framework in the client folder, all of your back-end files in the server folder, and all of your database and other configurations in the config folder. Your entrypoint is just a file containing the command(s) to start everything. Whether this is a package.json file, or a python file that starts your django server, it's nice to keep it in the root of your project.
  
−
* All good frameworks will take care of rudimentary security details for you, like preventing CSRF attacks and sealing up any XSS holes.  '''Read your framework's security article before continuing.  If your framework does not have a security article, ''you probably shouldn't be using that framework.'' '''
+
Have fun!
−
* Choose a framework '''written in a language that best suits your needs'''.  In addition to Ruby, Python, and PHP, there are frameworks written in Java, ASP.NET, C++, JavaScript, and more.
 
−
* '''Make sure that the framework is still being maintained.'''  You don't want to start using a framework that hasn't been updated in several years.
 
  
 
[[Category:Module 5]]
 
[[Category:Module 5]]

Revision as of 06:02, 26 March 2019

So far in this class, you have been using PHP, HTML, and now JS to run your web site. You may have found that PHP can become burdensome for larger applications and difficult to use in collaboration.

Web Frameworks are an alternative method for writing web applications. Frameworks exist to make writing code more maintainable, scalable, as well as to introduce base functionality for the application you make.

There are hundreds of frameworks available. We've categorized and listed some of the more popular below to help you decide what's right for your application.

Common Features of Frameworks

Routing

A key difference between PHP and web frameworks is in how routing occurs.

In PHP, if you went to an address like http://www.example.com/welcome.php then Apache would run the script located at, for example, /var/www/html/welcome.php.

With routers, however, you can set arbitrary URLs to run different controller files.

Less Code

Frameworks are designed to separate your application logic from your HTML and CSS. In fact, most web frameworks automatically generate all of the HTML and CSS that you need. So, you could write a fully functional (albeit bland-looking) web site in a Web Framework without writing a singly line of HTML or CSS!

MVC Architecture

In PHP, your code probably ended up jumbled together in various disorganized places. This is part of the reason why many Web Frameworks choose to use a Model-View-Controller architecture.

You learned about the Model-View-Controller architecture in CSE 132. If you need a review, read the article on Wikipedia.

A directory structure for an MVC framework might look like the following:

  • app (holds MVC components)
    • models (contains models)
    • controllers (contains controllers)
    • views (contains views)
  • config (holds global server configurations)
  • lib (other assorted libraries)

With an MVC architecture, a request to the server typically follows the following path:

  1. The server routes the request to a certain controller.
  2. The controller interprets the request, loading requested information from the models.
  3. The controller passes the information from the models to a view.
  4. The final view is sent to the user.

So what do I do?

Front-end Frameworks

React

Get started Here

We recommend cloning as a starting point Create React App

React is the most popular front end framework. React uses JS to create HTML (JSX), as opposed to updating HTML with JS. This makes manipulating the DOM more efficient and smoother.

Vue

Get started Here

Really good happy medium between React and Angular. Not fully contained, but separates/organizes your code very nicely. Don't have to use JSX or Angular specific methods. Code structure is better organized than React, but not as opinionated as in Angular.

Vue is partnered with PHP Laravel so a lot of the integrations are very code-friendly.

Angular

Get started Here

Not to be confused with Angular.js (the old version), Angular is the Google developed front-end framework that competes with React and Vue. Angular has it's own more opinionated code practices, making it easy for developers to understand but a higher initial learning curve.

Back-end Frameworks

Express (NodeJS)

Get started Here

If you're planning on using a NodeJS backend, Express is a great option. Other options include Hapi.js or KOA if you're already familiar with Express and want to try something else.

Laravel (PHP)

Get started Here

Laravel is certainly the most popular PHP back-end option. If you aren't sure you want to venture over to a Node, Python, or other back-end, I urge you to try Laravel instead of vanilla PHP. Super clean, super simple, genuinely makes writing PHP enjoyable. As mentioned above, it's coupled extremely well with Vue.js, I would recommend searching for tutorials of the two together if that's the approach you'd like to take.

Django (Python)

Get started Here

Django's tagline is "The Web framework for perfectionists with deadlines". Take that as you will.

Django is a fairly opinionated full-stack framework, meaning both your front-end and back-end will be written and handled by Django (as opposed to, say Express, which can integrate with whatever sort of front-end you'd like). This doesn't mean it's more difficult to learn, but it does kind of force you to learn how Django does its front-end and back-end which is why it counts for both in terms of points.

Flask (Python)

Get started Here

Flask is a micro back-end framework and is extremely easy to setup. Unlike Django, Flask won't handle your Front-end for you. This leaves you the option to use any of the recommended front-end frameworks or to just use regular HTML/JS.

Bottle (Python)

Get started Here

Same gist as Flask, just an alternative.

Other and Database Info

MongoDB

Get started Here

MongoDB is a very popular no-sql based database. It may seem like a hassle to learn another type of database querying, but as soon as you realize you don't have to mess with foreign keys and it's all essentially javascript objects, it becomes a pretty attractive option. They also have free cloud databases now which is awesome because you don't have to worry about hosting a database on your computer, but much of the security is handled on their end.

Firebase

Get started Here

Firebase is another cloud-based no-sql option. Firebase provides everything from the database itself to real-time crash reporting and analytics. Very easy to integrate into your app and get started with.

Other SQL

PostgreSQL

MariaDB

Structuring Your Project

Once you've outlined your project and have chosen what languages and frameworks you'd like to use, knowing where to start can be a bit daunting. We recommend a straightforward file structure similar to the following: 

client/
server/
config/
entrypoint

Depending on what frameworks you're using, it's easy to just place your full front-end framework in the client folder, all of your back-end files in the server folder, and all of your database and other configurations in the config folder. Your entrypoint is just a file containing the command(s) to start everything. Whether this is a package.json file, or a python file that starts your django server, it's nice to keep it in the root of your project.

Have fun!

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Web_Frameworks&oldid=2649"