Scribd
Upload
145 views

Front End Programming: Mendel Rosenblum

This document summarizes the history and concepts of front-end web development frameworks. It discusses early static HTML websites and CGI programs, then covers first-generation frameworks that incorporated server-side languages. Second-generation frameworks introduced MVC patterns and object-relational mapping. Third-generation frameworks like AngularJS ran JavaScript in the browser. Key concepts like MVC, templating, and controllers are explained. Emerging fourth-generation frameworks focus on reusable JavaScript components and virtual DOM techniques.

Uploaded by

Viuleta Sun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
145 views

Front End Programming: Mendel Rosenblum

This document summarizes the history and concepts of front-end web development frameworks. It discusses early static HTML websites and CGI programs, then covers first-generation frameworks that incorporated server-side languages. Second-generation frameworks introduced MVC patterns and object-relational mapping. Third-generation frameworks like AngularJS ran JavaScript in the browser. Key concepts like MVC, templating, and controllers are explained. Emerging fourth-generation frameworks focus on reusable JavaScript components and virtual DOM techniques.

Uploaded by

Viuleta Sun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Front End Programming

Mendel Rosenblum

CS142 Lecture Notes - FrontEnd


Brief history of Web Applications
● Initially: static HTML files only with HTML forms for input

● Common Gateway Interface (CGI)


○ Certain URLs map to executable programs that generate web page
○ Program exits after Web page complete
○ Introduced the notion of stateless servers: each request independent, no state
carried over from previous requests. (Made scale-out architectures easier)

○ Perl typically used for writing CGI programs

CS142 Lecture Notes - FrontEnd


First-generation web app frameworks
Examples: (PHP, ASP.net, Java servlets)

● Incorporate language runtime system directly into Web server

● Templates: mix code and HTML - HTML/CSS describes view

● Web-specific library packages:


○ URL handling
○ HTML generation
○ Sessions
○ Interfacing to databases

CS142 Lecture Notes - FrontEnd


Second-generation frameworks
Examples: (Ruby on Rails, Django):

● Model-view-controller: stylized decomposition of applications

● Object-relational mapping (ORM): simplify the use of databases (make


database tables and rows appear as classes and objects)
○ Easier fetching of dynamic data

CS142 Lecture Notes - FrontEnd


Third-generation frameworks
Example: AngularJS

● JavaScript frameworks running in browser - More app-like web apps


○ Interactive, quick responding applications - Don't need server round-trip

● Frameworks not dependent on particular server-side capabilities


○ Node.js - Server side JavaScript
○ No-SQL database (e.g. MongoDB)

● Many of the concepts of previous generations carry forward


○ Model-view-controllers
○ Templates - HTML/CSS view description

CS142 Lecture Notes - FrontEnd


Model-View-Controller (MVC) Pattern
● Model: manages the application's data
○ JavaScript objects. Photo App: User names, pictures, comments, etc.

● View: what the web page looks like


○ HTML/CSS. Photo App: View Users, View photo with comments

● Controller: fetch models and control view, handle user interactions,


○ JavaScript code. Photo App: DOM event handlers, web server communication

MVC pattern been around since the late 1970's


○ Originally conceived in the Smalltalk project at Xerox PARC

CS142 Lecture Notes - FrontEnd


View Generation
● Web App: Ultimately need to generate HTML and CSS
● Templates are commonly used technique. Basic ideas:
○ Write HTML document containing parts of the page that are always the same.
○ Add bits of code that generate the parts that are computed for each page.
○ The template is expanded by executing code snippets, substituting the results into the
document.

● Benefits of templates (Compare with direct JavaScript to DOM programming)


○ Easy to visualize HTML structure
○ Easy to see how dynamic data fits in
○ Can do either on server or browser

CS142 Lecture Notes - FrontEnd


AngularJS view template (HTML/CSS)
...
<body>
<div class="greetings">
Hello {{models.user.firstName}},
</div>
<div class="photocounts">
You have {{models.photos.count}} photos to review.
</div>
</body>
Angular has rich templating language (loops, conditions, subroutines, etc.). Later...

CS142 Lecture Notes - FrontEnd


Controllers
● Third-generation: JavaScript running in browser

Responsibilities:

● Connect models and views


○ Server communication: Fetch models, push updates
● Control view templates
○ Manage the view templates being shown
● Handle user interactions
○ Buttons, menus, and other interactive widgets

CS142 Lecture Notes - FrontEnd


AngularJS controller (JavaScript function)
function userGreetingView ($scope, $modelService) {
$scope.models = {};
$scope.models.users = $modelService.fetch("users");
$scope.models.photos = $modelService.fetch("photos");

$scope.okPushed = function okPushed() {


// Code for ok button pushing
}
}
Angular creates $scope and calls controller function called when view is
instantiated
CS142 Lecture Notes - FrontEnd
Model Data
● All non-static information needed by the view templates or controllers
● Traditionally tied to application's database schema
○ Object Relational Mapping (ORM) - A model is a table row

● Web application's model data needs are specified by the view designers
But need to be persisted by the database
● Conflict: Database Schemas don't like changing frequently but web
application model data might (e.g. user will like this view better if we add …
and lose ...)

CS142 Lecture Notes - FrontEnd


Angular doesn't specify model data (JavaScript objs)
● Angular provides support for fetching data from a web server
○ REST APIs
○ JSON frequently used
On Server:
● Mongoose's Object Definition Language (ODL) has "models"
var userSchema = new Schema({
firstName: String,
lastName: String,
});
var User = mongoose.model('User', userSchema);

CS142 Lecture Notes - FrontEnd


Fourth-generation frameworks
Examples: React.js, Vue.js, Angular(v2)

● Many of the concepts of previous generations carry forward


○ JavaScript in browser
○ Model-view-controllers
○ Templates

● Focus on JavaScript components rather than pages/HTML


○ Views apps as assembled reusable components rather than pages.
○ Software engineering focus: modular design, reusable components, testability, etc.

● Virtual DOM
○ Render view into DOM-like data structure (not real DOM)
○ Benefits: Performance, Server-side rendering, Native apps
CS142 Lecture Notes - FrontEnd

You might also like