Bài giảng Web technologies and e-Services - Bài 9, Phần 1: Front end programming - Nguyễn Bình Minh
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
● 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, responsive applications
● 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
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
13 trang
27/04/2022
3800
Bạn đang xem tài liệu "Bài giảng Web technologies and e-Services - Bài 9, Phần 1: Front end programming - Nguyễn Bình Minh", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_giang_web_technologies_and_e_services_bai_9_phan_1_front.pdf
