Scribd
Upload
33 views

Lecture 3 - Templating and Persistence

This document discusses templating and persistence in web development. It defines templating as separating view code from model and controller code using declarative syntax and templates. Templates contain static information and placeholders that are replaced with dynamic content. The document discusses different types of templating including tags, sections, and server-side templating using JavaScript and jQuery. It also covers model-view-controller frameworks, routing frameworks, virtual DOM frameworks, and front-end frameworks.

Uploaded by

Xpds
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

Lecture 3 - Templating and Persistence

This document discusses templating and persistence in web development. It defines templating as separating view code from model and controller code using declarative syntax and templates. Templates contain static information and placeholders that are replaced with dynamic content. The document discusses different types of templating including tags, sections, and server-side templating using JavaScript and jQuery. It also covers model-view-controller frameworks, routing frameworks, virtual DOM frameworks, and front-end frameworks.

Uploaded by

Xpds
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

COMP

2537
Templating & Persistence
What is Templating? (1/5)

● A form of Responsibility Driven Design (RDD)


○ Huh? What’s RDD?
■ In OOD it is ensuring you create classes/modules/APIs that are as
self-contained as possible with a client server model
● Templating does this too:
○ View code (i.e., code that creates your UI) is separate from
○ Model/logic code (i.e., code that handles content)
○ Controller code (i.e., code that acts as a go-between – between model
and view)
What is Templating? (2/5)

● Model contains assets (e.g., profile info, image gallery, media streams, etc.)
○ Can be hosted in the file system, DB, cloud, etc.
● View is represented by declarative syntax
○ And has an engine that interprets the code
○ Views or view components are represented as templates
■ Templates contain static information – such as look-and-feel data,
and placeholders
What is Templating? (3/5)

● One of the earlier examples was


Java Server Pages (JSPs), from 1999
Much of the templating that you see now
has roots in the Java server environment
from the early 2000s
What is Templating? (4/5)

● A plethora of XML-based declarative UI languages for the Java platform


were created as well offering separation of concerns – including one from
yours truly
What is Templating? (5/5)

● Templating can take the form of:


○ “tags” – that are interpreted as in JSP examples
○ Sections/components – that contain blocks of dynamic content
● All web development environments offer some form of templating
● In Node.js we can use:
○ The templating capability offered by Express.js
■ This requires you to define your templates
○ Embedded JavaScript Templating (EJS)
■ A full-fledged templating framework
Templating with Server-Side JS/DOM (1/2)

● Approach:
○ Use the server to perform all templating operations before handing
rendered views to the client
○ Uses JSDOM & jQuery on the server-side
○ Parts of the page (i.e., components) are split up
■ Could potentially come from other servers or services entirely!
○ Using JSDOM and jQuery on the server, replace placeholders with
dynamic content
Templating with Server-Side JS/DOM (2/2)

● Benefits:
○ User is unaware of any construction of view (encapsulation)
■ Can hide different services or different parts of a service
○ Less resources used on the client side
○ less chance of things breaking

● Let’s look at the templating example …


JS Frameworks

● There are different types of JS frameworks and where they exist


● Where they exist:
○ On the back-end (i.e., server side programming)
○ On the client-side (i.e., in the web browser)
● Different types of frameworks:
○ Virtual DOM
○ Routing
○ MVC
○ UI/View/GUI
○ Templating (which we’ve already covered)
Virtual DOM Frameworks

● Virtual DOM (AKA shadow DOM), within the context of JS:


○ Virtual DOM – a hierarchy of data structures (e.g., objects)
○ Used to represent the UI portion of the web page/app
○ Is synchronized with the actual DOM
■ i.e., the DOM that is part of the JS runtime and web page
■ E.g., ReactDOM from React.js
● Why a Virtual DOM?
○ Ease of use
○ Speed up development time
Routing Frameworks (1/2)

● You’ve already used Express.js in COMP 1537


○ It is a routing framework
● Routing = how end points (i.e., paths to resources) are:
○ Accessed
○ Responded to
○ Implemented
● Routing frameworks can be on the
○ Server-side (e.g., Express.js)
○ Client-side – usually not a separate framework but a component of a
larger framework (e.g., React-router from React.js)
Routing Frameworks (2/2)

● Server-side routing:
○ Answers the calls from client-side scripts
○ Accepts HTTP parameters in an elegant way
○ Allows for much more modular S/W development
● Client-side routing:
○ Inspired by server-side routing
○ Is sometimes a mixture of client and server-side
○ Makes client-side code easier to maintain
MVC Frameworks (1/3)

● Stands for Model-View-Controller


● Sometimes referred to as a design pattern
○ More of an architecture
● Each component/section has a different responsibility
○ Model – the business logic/data structures
○ View – what’s presented to the user
■ (e.g., web app front-end, GUI, etc.)
○ Controller – handler of events/callbacks
MVC Frameworks (2/3)

● General characteristics of this pattern:


○ The model is not aware of the view
○ The model can be aware of the controller
■ Or a intermediate (e.g., adapter design pattern)
○ The view can know about the model
○ The controller is the “go between”
■ Acting as a mediator
○ “know about” – can make calls on an exposed interface
■ Interface is the set of methods that can be called
MVC Frameworks (3/3)

● MVC frameworks started in the world of desktop software development


○ Java Swing framework has something similar:
■ Delegate (has the view and the controller as one)
■ Model
● MVC frameworks have become a popular choice for front-end JS
developers, such as (but not limited to):
○ Backbone.js, Angular.js, ExtJS
Front-End/View Frameworks

● Scope is in making development streamlined within the specificities of


front-end web:
○ Easy wiring of HTML elements to DOM events
○ Easier to connect to servers – send and receive data
● Examples:
○ Facebook’s React.js (also see React Native for mobile dev)
○ Vue.js
○ Svelte
Which Routing Framework to Use?

● So, should we use routing frameworks?

If on the server-side, definitely


If on the client-side, perhaps …
depends …
Which MVC Framework to Use?
● Okay, how about …
○ Which MVC framework should we use? And virtual DOM?
○ How about which front-end/view framework?
● Depends, depends, depends …
○ Bad: they add overhead, introduce complexity, require
dependency/integration, popularity of XYZ framework changes over
time (and quickly – flavor of the week/month???)
○ Good: can reduce development time, reduce amount of code that you
have to write, potentially make scaling easier
Takeaway with Frameworks

● They are meant to:


○ Reduce development time, decrease errors/problems/bugs
○ Make development of web apps easier/faster
● So why would I be hesitant to use them?
○ They can reduce performance (more often than not)
○ They add an extra layer of complexity to your app
○ They are constantly being replaced with another:
■ New/improved/better/faster/cooler framework
○ Employers want you to know the fundamentals – not XYZ framework

You might also like