1. What are the main elements of client-side application components of distributed systems?
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
VIEW DEVELOPMEN
Content –HTML
Different types of elements to define content
Structural elements
Formatting –CSS
There are three ways of inserting a style sheet:
Tools
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Model–View–Controller (usually known as MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.[1][2] The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture has become popular for designing web applications.[3] Popular programming languages like Java, C#, Python, Ruby, PHP have MVC frameworks that are used in web application development straight out of the box.
4. Discuss the client-Model development technologies for the browser-based client components of web-based applications
Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers which await incoming requests. Examples of computer applications that use the client–server model are Email, network printing, and the World Wide Web.
5. Explain different categories of elements in HTML, proving examples for their use
html - <html> element...</html>
HTML Element Code:
<html>
</html>
html - <head> element
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
<head>
</head>
</html>
html - <body> element
HTML Body Element Code:
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
6. Discuss the importance of CSS, indicating new features of CSS3
Well, it makes CSS3 a whole lot easier to handle given its complexity. Doing this the CSS2 way, would've made things very difficult to manage. The most importantmodules include Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface.
7. Compare and contrast the 3 main types of CSS selectors
8. Discuss the advanced CSS selectors, explaining the specificity
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
There are the following three types of CSS:
Saves Time
Let’s consider an example. You run a website that has 40 pages or more. Due to the need for some strategic changes in the content of the website, you now need to change the text size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually making the size changes to all those 40 pages? A lot! This is where CSS comes into the scenario as a savior. You can then define the changes in a single CSS file and reference all those 40 pages to that same file and your work will be done. Your entire website will start reflecting the size changes.
Help to Make Spontaneous and Consistent Changes
Considering our very own example from the first advantage above, imagine that you have to make more fluid changes to your content. Again, with a single style sheet, you will be able to ensure that the changes look uniform on all the pages and not botched up. If it were not for CSS, you would have to take notes of changes made to one page and reference it while you make changes to another page, always going back and forth. Imagine the amount of exhaustion and brain activity that would be required to justify the consistency of these changes throughout. However, with CSS, your changes are well applied consistently.
Improves Page Loading Speed
Code density on your website contributes to its speed. The more the code, the slower the website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds to load.
Just a few lines of code is all that is required to make changes to a large number of pages on the website with CSS. Since there is minimal code, the website database remains uncluttered, thus, eliminating any website loading issues. Implementing CSS along with the choice of best website builders is a great way to keep visitors hooked on to your website as they won’t have to wait up for your website to load.
Device Compatibility
CSS changes are device friendly. With people using a whole lot of different range of smart devices to access websites over the internet, there is a need for responsive web design. CSS serves the purpose here by making your web pages more responsive so that they end up displaying in the same manner on all devices.
Disadvantages of Cascading Style Sheet (CSS)
Cross-Browser Issues
Implementing initial CSS changes on a website is easy on the developer’s end. However, after the changes have been made, you will have to confirm the compatibility if the CSS is displaying similar change effects on all the browsers. This is simply due to the fact that CSS works differently on different browsers.
Confusion Due to Its Many Levels
The programming language world in itself is crazily complicated for non-developers and beginners. To add to that, different levels of CSS i.e. CSS; CSS 2; CSS 3 can be quite confusing for the mentioned lot.
Vulnerable
If you have worked with CSS, you probably know that it is easily accessible because of its open text-based system. An accident or a mere act of mischief with the files can end up disrupting the display and formatting of your entire website. It would only require a read/write access to the intended website to override the changes.
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
12. Discuss the client-side component development related aspects in browser-based web applications
According to the very first and basic web app architecture, a server, consisting of web page construction logic and business logic interacts with a client by sending out a complete HTML page. To see an update, the user needs to fully reload the page or, in other words, to have the client send a request for an HTML page to the server and load its entire code once again. Look at this type’s web application architecture diagram below.
Since all the logics and data are stored on the server and the user doesn’t have any access to it, this architecture type is highly secure. Still, due to constant content reload and huge data exchange, it is more common for static websites than actual web apps.
13. Discuss the new features in JS version 6
- Views – what users see (mainly GUIs)
- Controllers – contain event handers for the Views
- Client-model – Business logic and data
2. Discuss the Views development technologies for the browser-based client-components of web-based applications
VIEW DEVELOPMEN
Content –HTML
Different types of elements to define content
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
Structural elements
- header, footer, nav, aside, article
- Text elements
- Headings –<h1> to <h6>
- Paragraph –<p>
- Line break -<br>
- Images
- Hyperlinks
Formatting –CSS
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
Tools
- jQuery–A JS library, but can be seen a framework too. It wraps the complexity of pure JS. There are lots of JS frameworks, libraries, and plugins built using jQuery. Good for DOM processing.
- jQuery UI –Focus on GUI development
- Bootstrap–to rapidly design and develop responsive web pages and templates
- Angular–a JS framework/platform to build frontend applications
- React–a JavaScript library for building user interfaces
3. Discuss the Controller development technologies for the browser-based client-components of web-based applications
Model–View–Controller (usually known as MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.[1][2] The MVC design pattern decouples these major components allowing for efficient code reuse and parallel development.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture has become popular for designing web applications.[3] Popular programming languages like Java, C#, Python, Ruby, PHP have MVC frameworks that are used in web application development straight out of the box.
4. Discuss the client-Model development technologies for the browser-based client components of web-based applications
Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers which await incoming requests. Examples of computer applications that use the client–server model are Email, network printing, and the World Wide Web.5. Explain different categories of elements in HTML, proving examples for their use
html - <html> element...</html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.
If you haven't already, it is time to open up Notepad, Notepad++, or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Element Code:
<html>
</html>
Now save your file by selecting - Menu and then Save. Click on the Save as Type drop down box and select the option All Files. When you're asked to name your file, name it - index.html. Double-check that you did everything correctly and then press - Save. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.
html - <head> element
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
<head>
</head>
</html>
If you've made the code changes and refreshed the browser page, you will notice that we still have nothing happening on the page.
html - <body> element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
6. Discuss the importance of CSS, indicating new features of CSS3
Well, it makes CSS3 a whole lot easier to handle given its complexity. Doing this the CSS2 way, would've made things very difficult to manage. The most importantmodules include Selectors, Color, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations and user interface.
7. Compare and contrast the 3 main types of CSS selectors
- Inline CSS -
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
- Internal CSS sheets -
The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.
- External CSS sheets -
With an external style sheet, you can change the look of an entire website by changing just one file!
- Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head>
8. Discuss the advanced CSS selectors, explaining the specificity
Advanced Selectors in CSS
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
1) Adjacent Sibling Selector:
It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
Syntax: It select ul tags which immediately follows the h4 tag
h4+ul{
border: 4px solid red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
2) Attribute Selector:
It selects a particular type of inputs.
Syntax:
input[type="checkbox"]{
background:orange;
}
Example:
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:
3) nth-of-type Selector:
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(5){
background:purple;
}
If we want to make canges in all even li.
li:nth-of-type(even){
background: yellow;
}
Example:
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Output:
9. Explain the use for CSS media queries in responsive web development Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:
1) Adjacent Sibling Selector:
It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
Syntax: It select ul tags which immediately follows the h4 tag
h4+ul{
border: 4px solid red;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Output:
2) Attribute Selector:
It selects a particular type of inputs.
Syntax:
input[type="checkbox"]{
background:orange;
}
Example:
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:
3) nth-of-type Selector:
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(5){
background:purple;
}
If we want to make canges in all even li.
li:nth-of-type(even){
background: yellow;
}
Example:
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Output:
When you create a website for your business, time and money are likely to be major concerns. Luckily, there is a web design method that can help you save time and money while also improving your visitor's experience. Cascading Style Sheets, more commonly known as CSS, has fast become the preferred web design method for the benefits it offers web designers and website visitors alike.
CSS is a language used to detail the presentation of a web page's markup language (most commonly HTML or XHTML) – such as colors, fonts, and layout. One of its key benefits is the way it allows the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS).
If you already have a website that was designed using tables, you may be reluctant to make the switch to CSS, which will require some time and effort. However, the benefits of CSS are the same for new and old websites alike — so why wait? Here are 5 great reasons to ditch those pesky tables and turn your website into a CSS success story.
- Consistency
- Search Engines
- Viewing Options
- Browser Compatibility
- Bandwidth Reduction
10. Identify the pros and cons of 3 ways of using CSS (inline, internal, external)
There are the following three types of CSS:
- Inline CSS.
- Internal CSS.
- External CSS.
Saves Time
Let’s consider an example. You run a website that has 40 pages or more. Due to the need for some strategic changes in the content of the website, you now need to change the text size from 14pt to 12pt or vice-versa. How much time do you think will it take for manually making the size changes to all those 40 pages? A lot! This is where CSS comes into the scenario as a savior. You can then define the changes in a single CSS file and reference all those 40 pages to that same file and your work will be done. Your entire website will start reflecting the size changes.
Help to Make Spontaneous and Consistent Changes
Considering our very own example from the first advantage above, imagine that you have to make more fluid changes to your content. Again, with a single style sheet, you will be able to ensure that the changes look uniform on all the pages and not botched up. If it were not for CSS, you would have to take notes of changes made to one page and reference it while you make changes to another page, always going back and forth. Imagine the amount of exhaustion and brain activity that would be required to justify the consistency of these changes throughout. However, with CSS, your changes are well applied consistently.
Improves Page Loading Speed
Code density on your website contributes to its speed. The more the code, the slower the website gets. FYI, visitors are quick to abandon a website if it takes more than 2-3 seconds to load.
Just a few lines of code is all that is required to make changes to a large number of pages on the website with CSS. Since there is minimal code, the website database remains uncluttered, thus, eliminating any website loading issues. Implementing CSS along with the choice of best website builders is a great way to keep visitors hooked on to your website as they won’t have to wait up for your website to load.
Device Compatibility
CSS changes are device friendly. With people using a whole lot of different range of smart devices to access websites over the internet, there is a need for responsive web design. CSS serves the purpose here by making your web pages more responsive so that they end up displaying in the same manner on all devices.
Disadvantages of Cascading Style Sheet (CSS)
Cross-Browser Issues
Implementing initial CSS changes on a website is easy on the developer’s end. However, after the changes have been made, you will have to confirm the compatibility if the CSS is displaying similar change effects on all the browsers. This is simply due to the fact that CSS works differently on different browsers.
Confusion Due to Its Many Levels
The programming language world in itself is crazily complicated for non-developers and beginners. To add to that, different levels of CSS i.e. CSS; CSS 2; CSS 3 can be quite confusing for the mentioned lot.
Vulnerable
If you have worked with CSS, you probably know that it is easily accessible because of its open text-based system. An accident or a mere act of mischief with the files can end up disrupting the display and formatting of your entire website. It would only require a read/write access to the intended website to override the changes.
11. Identify frameworks/libraries/plugins/tools to develop the Views/web pages, and discuss their similarities and differences
Libraries
A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.
Frameworks
A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.
plugins
A plugin is a software that can be extended to add some functionality to the site. In Wordpress, you can get millions of free plugin from the plugin directory. Here are some of the essential plugins that the site should have to ensure its backup and security.
12. Discuss the client-side component development related aspects in browser-based web applications
According to the very first and basic web app architecture, a server, consisting of web page construction logic and business logic interacts with a client by sending out a complete HTML page. To see an update, the user needs to fully reload the page or, in other words, to have the client send a request for an HTML page to the server and load its entire code once again. Look at this type’s web application architecture diagram below.
Since all the logics and data are stored on the server and the user doesn’t have any access to it, this architecture type is highly secure. Still, due to constant content reload and huge data exchange, it is more common for static websites than actual web apps.
13. Discuss the new features in JS version 6
There is a wide range of web-based applications available, and their numbers continue to grow. Well-known types of software you can find in web-based versions are email applications, word processors, spreadsheet apps, and a host of other office productivity tools.
For example, Google offers a suite of office productivity applications in a style most people are already familiar with. Google Docs is a word processor, and Google Sheets is a spreadsheet application.
Microsoft's ubiquitous office suite has a web-based platform known as Office Online and Office 365. Office 365 is a subscription service.
Web-based tools can also make meetings and collaborations vastly easier. Applications such as Web Ex and Go To Meeting make setting up and running an online meeting easy.
Here’s the list of the best ES6 features for a busy software engineer
1. 1. Default Parameters in ES6
Remember we had to do these statements to define default parameters:
var link = function (height, color, url) {
var height = height || 50
var color = color || 'red'
var url = url || 'http://azat.co'
...
}
They were okay until the value was 0 and because 0 is falsy in JavaScript it would default to the hard-coded value instead of becoming the value itself. Of course, who needs 0 as a value (#sarcasm font), so we just ignored this flaw and used the logic OR anyway… No more! In ES6, we can put the default values right in the signature of the functions:
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
By the way, this syntax is similar to Ruby!
2. Template Literals in ES6
Template literals or interpolation in other languages is a way to output variables in the string. So in ES5 we had to break the string like this:
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
Luckily, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
3. Multi-line Strings in ES6
Another yummy syntactic sugar is multi-line string. In ES5, we had to use one of these approaches:
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
var four Agreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
While in ES6, simply utilize the back ticks:
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`
4. Destructuring Assignment in ES6
Destructuring can be a harder concept to grasp, because there’s some magic going on… let’s say you have simple assignments where keys house and mouse are variables house and mouse:
[Sidenote]
Reading blog posts is good, but watching video courses is even better because they are more engaging.
A lot of developers complained that there is a lack of affordable quality video material on Node. It's distracting to watch to YouTube videos and insane to pay $500 for a Node video course!
[End of sidenote]
var data = $('body').data(), // data has properties house and mouse
house = data.house,
mouse = data.mouse
Other examples of destructuring assignments (from Node.js):
var jsonMiddleware = require('body-parser').json
var body = req.body, // body has username and password
username = body.username,
password = body.password
In ES6, we can replace the ES5 code above with these statements:
var {house, mouse} = $('body').data() // we'll get house and mouse variables
var {json: jsonMiddleware} = require('body-parser')
var {username, password} = req.body
This also works with arrays. Crazy!
var [col1, col2] = $('.column'),
[line1, line2, line3, , line5] = file.split('\n')
It might take some time to get use to the destructuring assignment syntax, but it’s a sweet sugarcoating.
5. Enhanced Object Literals in ES6
What you can do with object literals now is mind blowing! We went from a glorified version of JSON in ES5 to something closely resembling classes in ES6.
Here’s a typical ES5 object literal with some methods and attributes/properties:
var serviceBase = {port: 3000, url: 'azat.co'},
getAccounts = function(){return [1,2,3]}
var accountServiceES5 = {
port: serviceBase.port,
url: serviceBase.url,
getAccounts: getAccounts,
toString: function() {
return JSON.stringify(this.valueOf())
},
getUrl: function() {return "http://" + this.url + ':' + this.port},
valueOf_1_2_3: getAccounts()
}
If we want to be fancy, we can inherit from service Base by making it the prototype with the Object.create method:
var accountServiceES5ObjectCreate = Object.create(serviceBase)
var accountServiceES5ObjectCreate = {
getAccounts: getAccounts,
toString: function() {
return JSON.stringify(this.valueOf())
},
getUrl: function() {return "http://" + this.url + ':' + this.port},
valueOf_1_2_3: getAccounts()
}
I know, account Service ES5 Object Create and account Service ES5 are NOT totally identical, because one object (account Service ES5) will have the properties in the __ proto __ object as shown below:
Enhanced Object Literals in ES6
But for the sake of the example, we’ll consider them similar. So in ES6 object literal, there are short hands for assignment get Accounts: get Accounts, becomes just get Accounts,. Also, we set the prototype right there in the __proto__`` property which makes sense (not‘proto’` though:
var serviceBase = {port: 3000, url: 'azat.co'},
getAccounts = function(){return [1,2,3]}
var accountService = {
__proto__: serviceBase,
getAccounts,
Also, we can invoke super and have dynamic keys (value Of_1_2_3):
toString() {
return JSON.stringify((super.valueOf()))
},
getUrl() {return "http://" + this.url + ':' + this.port},
[ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
};
console.log(accountService)
14. Identify frameworks/libraries/plugins/tools to develop the client-side components of
browser-based applications, and discuss their similarities and differences
There isn’t anything magic about frameworks or library. Both libraries and frameworks are reusable code written by someone else. Their purpose is to help you solve common problems in easier ways.
I often use a house as a metaphor for web development concepts.
A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.
A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.
The Technical Difference
The technical difference between a framework and library lies in a term called inversion of control.
When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
Let’s look at an example using jQuery (a library) and Vue.js (a framework).
Imagine we want to display an error message when an error is present. In our example, we will click a button, and pretend an error occurs.
With jQuery:
index.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
</script>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<button id="myButton">Submit</button>
</div>
</body>
</html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
</script>
<script src="./app.js"></script>
</head>
<body>
<div id="app">
<button id="myButton">Submit</button>
</div>
</body>
</html>
// app.js
// A bunch of our own code,
// followed by calling the jQuery library
// followed by calling the jQuery library
let error = false;
const errorMessage = 'An Error Occurred';
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
error = true; // pretend some error occurs and set error = true
if (error) {
$('#app')
.append(`<p id="error">${errorMessage}</p>`);
} else {
$('#error').remove();
}
});
error = true; // pretend some error occurs and set error = true
if (error) {
$('#app')
.append(`<p id="error">${errorMessage}</p>`);
} else {
$('#error').remove();
}
});
Notice how we use jQuery. We tell our program where we want to call it. This is much like going to a physical library and pulling certain books off the shelf as we want them.
That’s not to say jQuery functions don’t require certain inputs once we call them, but jQuery itself is a library of those functions. We are in charge.
No comments:
Post a Comment