Shots a Highperformance Web Templating Language A
Total Page:16
File Type:pdf, Size:1020Kb
SHOTS A HIGHPERFORMANCE WEB TEMPLATING LANGUAGE A thesis submitted to the Kent State University Honors College in partial fulfillment of the requirements for University Honors by David Steinberg December, 2013 Thesis written by David Steinberg Approved by ________________________________________________________________, Advisor _______________________________________, Chair, Department of Computer Science Accepted by _____________________________________________________, Dean, Honors College ii TABLE OF CONTENTS LIST OF FIGURES............................................................................................................iv LIST OF TABLES..............................................................................................................v ACKNOWLEDGEMENTS...............................................................................................vi CHAPTER I. ABSTRACT................................................................................................1 II. NOMENCLATURE....................................................................................2 III. INTRODUCTION.......................................................................................5 IV. CURRENT STATE OF WEB DEVELOPMENT.....................................6 V. THE PROBLEM.........................................................................................8 VI. THE GENESIS OF SHOTS......................................................................10 VII. DEVELOPING SHOTS............................................................................12 VIII. HOW TO USE SHOTS.............................................................................18 IX. ADVANTAGES OF USING SHOTS......................................................51 X. FUTURE DIRECTIONS..........................................................................53 XI. CONCLUSION.........................................................................................55 REFERENCES..................................................................................................................56 APPENDIX A...................................................................................................................57 APPENDIX B....................................................................................................................59 iii LIST OF FIGURES Figure 1. A Web Server and Clients..........................................................................13 iv LIST OF TABLES Table 1. Symbol Set.................................................................................................19 Table 2. Resource File Extensions............................................................................44 Table 3. HTML vs. Shots.........................................................................................51 v ACKNOWLEDGEMENTS The author would like to thank Dr. Arden Ruttan for his support as an advisor and good nature throughout the general mayhem of this project over the last year. The author would also like to thank Dr. Mikhail Nesterenko, Dr. Jonathan Secaur and Dr. Elizabeth Howard for their support as members of the thesis defense committee. vi 1 Abstract Pythonbased web development lacks a templating language that offers the same sleek succinctness that Python does. Conventional methods of producing HTML web pages are cumbersome and errorprone. Shots is a web page templating language that aims for efficiency and effectiveness through a minimal syntax and automatic, assistive functionality for “boilerplate” programming. This paper is broken into sections detailing the lifecycle of Shots. It begins with general details about web development and a discussion of various technologies and tools used. Observations of what is currently missing in web development and an overview of the author’s previous attempts at languages for web development follow. An outline of the process of building the Shots language is presented, and then a guide for use is provided. The paper concludes with a look at the advantages of using Shots and future directions of the project. 2 Nomenclature Within the context of this document, the following definitions of these domainspecific terms are assumed: “client” refers to an individual (or usually his or her computer) who accesses a web page. “clientside” refers to anything in a web browser on an individual’s computer that is displaying/interacting with a web page. “CSS” refers to Cascading Style Sheets, a language to describe the way a page’s content should be styled. “delimiter” refers to a special symbol or set of symbols used to separate sections of text, usually signifying a section of text with special meaning. “Django” refers to a popular web framework, written in Python, that offers some different inherent functionality than Flask, such as connection to a database. “favicon” refers to the (usually 16 x 16 pixel) image to the left of URLs in a web browser’s address bar. They are used to provide visual context to a web page visitor as well as 3 bookmarks for a web page. “Flask” refers to a web server, written in Python, that can serve Shots (as well as raw HTML) to clients as web pages. “HTML” refers to HyperText Markup Language, a language used to describe the content (and general layout) of a web page. “JavaScript” refers to a clientside scripting language used to provide functionality (usually interactivity) to web pages. “Jinja” refers to a web page templating language that allows the addition of logic and programming control structures such as conditional statements and loops. “jQuery” refers to a JavaScript library that makes development in JavaScript much easier to write and read. “nested” refers to a section of code that is “inside” another section of code. “opensource” refers to the nonproprietary, shared programs and code bases. 4 “Python” refers to a serverside scripting language. Flask, Jinja and Shots are all written in Python. “preprocessor” refers to a program that manipulates input into a different output before its use by another program. “regular expression” refers to a succinct representation of a pattern of text. In many programming languages, regular expressions can be used to efficiently search for and replace text. “server” refers to a computer that serves web pages. “serverside” refers to anything on a computer that is serving web pages. “tag” refers to words that are used to specify certain types of elements in HTML. “template engine” refers to a tool used to preprocess an HTML document, performing logical operations and adding in data from an external program. “URL” refers to uniform resource locators, used by web browsers as “addresses” of web pages on the Internet. 5 Introduction This paper presents a new web page templating language called Shots. It is written in Python and utilizes the Jinja [2] template engine. Shots is proposed as a language that will offer web developers efficiency and effectiveness through a minimal syntax and automatic functionality in areas such as file searching. The driving principle behind Shots is that web development should be straightforward, clean, and easy. Over the last decade, drastic increases in web development have inspired rapid evolution in the uses of certain existing technologies. Ruby and Python, interpreted languages mostly used to script operating systems, have become prominent serverside scripting languages used in web development. The growth in number and power of web servers written in both languages continue to spark the creation of various new tools. Preprocessing techniques applied to web development have broken the construction of dynamic, datadriven web pages down to a significantly quicker, cleaner process. Many libraries and languages have been built on top of existing preprocessing tools, and the layer of abstraction through which one can tackle web development is constantly being distilled. Shots sits at the top of a technological stack including Python, Flask, and Jinja. It is a clear cut, high level approach to the problem space of web page production. 6 Current State of Web Development At the core of web development is HTML, CSS and JavaScript. These clientside languages provide content layout, styling, and functionality, respectively. Web browsers render these languages as web pages to display to individuals. Every web page is “served” by a web server, and serverside technologies are at work before a page is served. Examples of serverside languages are Python, PHP, Node.js, and Ruby. These languages not are web servers by themselves, but they allow for logic and procedure within the computer serving the web pages. There are web servers written in each of these languages made to render and deliver web pages. Flask [1] is an example of a web server written in Python. Web servers often allow some sort of logic or procedure to be used prior to a page’s being served. One can utilize tools written in the same language as the web server (and other languages, but their use is beyond the point of this document) before a web page is served. A variety of available tools offer different services, some only accessible in certain languages. One popular type of tool is a preprocessor of CSS. Examples of CSS preprocessors are Sass [8], LESS [3] and Compass [5]. Each providing a somewhat different syntax, these tools allow an individual to compose his or her CSS in a more aesthetically pleasing, manageable way. The Sass, LESS or Compass will be translated to regular CSS before it is served to a client. Another