Skip to content

Instantly share code, notes, and snippets.

@StevenClontz
Last active Aug 29, 2015
Embed
What would you like to do?
Programming talk at New Hope High School

About the speaker

Steven Clontz is a mathematician and software developer from Auburn, Alabama, and co-founder of the startup Teloga, LLC responsible for Teloga.com for Music Organizations (a customer relationship manager). He is currently developing the open-source learning management system ALMS at https://github.com/StevenClontz/alms.

Open-source

All of the tools I use in my work are open-source: this typically means that the source code is freely available to both use and modify as needed. This means that rather than paying a company to create and support the software used, the community of fellow open-source programmers work together to create, maintain, and improve such software.

Money is still made by customizing or incorporating this code into more specific projects. For example, the Canvas Learning Management System is run on open-source code. Suppose Alice works for Instructure (the maintainers of the Canvas project). Theoretically, Bob could downoad the Canvas source code and create his own server to run a version of Canvas. However, the time he saves by paying Instructure to have Alice (an expert on Canvas) set it up for him on Instructure's own servers instead may be worth the money he pays.

Structure of HTML

Web browsers, at their heart, are simple terminals for displaying HTML documents. An HTML document is defined by a simple text file which describes the different elements of the page.

<doctype html>
<html>
  <head>
    <title>Title of the page goes here.</title>
  </head>
  <body>
    <h1>Heading for the page.</h1>
    <p>A paragraph of text.</p>
  </body>
</html>

HTML documents by themselves are read-only: they are meant for display, but not for interactivity.

There are two ways to create interactive web applications: using Javascript to write "frontend" code which runs within the web browser and manipulates the HTML code of the page, or using a server-side scripting language like .NET, Python, PHP, Ruby, or others to programmatically create custom HTML documents to reflect the state of the application. Most modern web applications use a mix of both - both Teloga.com and the work-in-progress ALMS applications use Ruby (with the Ruby on Rails framework) and Javascript (with the AngularJS framework).

The stack

the stack

AngularJS

AngularJS is a Javascript framework for creating single-page applications without reinventing the wheel. Since the application is downloaded to the web browser the client uses, it is able to react more quickly than an application running on a server on the other side of the internet.

Other options include React and EmberJS. Older webpages often use jQuery to extend basic Javascript, but jQuery is not a full frontend framework and isn't recommended for modern web applications.

Ruby on Rails

Ruby on Rails is a web framework using the Ruby programming language to allow for structured and rapid development of web applications. Rails applications use the "MVC" paradigm to separate the logic of a web application into three parts. Models represent the data being stored and manipulated. Views define the way webpages or API data should be displayed to the user. Controllers contain the logic for how certain requests for certain web addresses should be interpreted by the application.

Other backend frameworks include Django (for the Python language), and ASP.NET MVC (for .NET languages like C#).

Getting started

The Ruby on Rails Tutorial by Michael Hartl is the best place to start - no programming experience required.

The AngularJS Tutorial walks through the steps of creating a front-end application (no server required).

Finally, Angular-Rails.com is currently the best walkthrough on wiring these two frameworks together (but is more advanced than either of the previous tutorials).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment