Introduction to client-side
development
§ Client-side programming
has mostly to do with the user interface, with which the user interacts.
§ In web development it's the browser, in the
user's machine, that runs the code, and it's mainly done in javascript, flash,
etc.
§ This code must run in a
variety of browsers.
§ Distributed systems use
client-side elements for users to interact with.
§ These client-side elements
include
·
Views – what users see (mainly GUIs)
·
Controllers – contain event handers for the views
·
Client-model -Business logic and data
Components of web-based application
§ All web-based database
applications have three primary components: A web browser (or client), a web
application server, and a database server.
§ Web-based database
applications rely on a database server, which provides the data for the
application.
§ The database server
sometimes also provides business logic in the form of stored procedures.
§ Stored procedures can
offer significant performance advantages, especially in a multi-tiered
architecture.
§ In addition to database servers, other
enterprise information system components include IMS™ databases, WebSphere MQ
messages, and CICS® records.
§ The clients handle the
presentation logic, which controls the way in which users interact with the
application.
§ In some cases, the client validates
user-provided input. Web applications sometimes integrate Java applets into the
client-side logic to improve the presentation layer.
Applet
§ A Java program that is
part of a Hypertext Markup Language (HTML) page. (HTML is the standard method
for presenting web data to users.)
§ Applets work with
Java-enabled browsers, such as Microsoft Internet Explorer; they are loaded
when the HTML page is processed.
§ Web application servers
manage the business logic. The business logic, typically written in Java,
supports multitiered applications.
§ The web application server
can manage requests from a variety of remote clients.
§ The web application layer
might include JavaServer Pages (JSP) files, Java servlets, Enterprise JavaBeans
(EJB) components, or web services.
JSP
§ A technology that provides
a consistent way to extend web server functionality and create dynamic web
content.
§ The web applications that
you develop with JSP technology are server and platform independent.
Servlet
§ A Java program that
responds to client requests and generates responses dynamically.
EJB
§ A component architecture
for building distributed applications with the Java programming model.
§ Server transactional components are reusable
and provide portability across application servers.
Web services
§ Self-contained, modular
applications that provide an interface between the provider and the consumer of
application resources.
Web application environment
§ Web-based applications run
on a web application server and access data on an enterprise information
system, such as a Db2® database server.
§ The components of
web-based applications are spread across multiple tiers, or layers.
§ This information describes
the various components and architectural characteristics of web applications.
§ In general, the user
interface is on the first tier, the application programs are on the middle
tier, and the data sources that are available to the application programs are
on the enterprise information system tier.
§ Developing web-based applications
across a multitiered architecture is referred to as server-side programming.
§ Each of these application
servers defines a development environment for web applications and provides a
run time environment in which the web applications can execute.
§ The application server
code, which provides the run time environment, supports the appropriate
interface for interacting with the web server.
§ With application servers,
you can write programs for the application server's run time environment.
§ Developers of these
programs can focus on the business logic of the web application, rather than on
making the application work with a web server.
Different categories of elements in
HTML
Basic elements
§ A text header denoted
using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
tags.
§ A paragraph denoted using
the <p> tag.
§ A horizontal ruler denoted
using the <hr> tag.
§ A link denoted using the
<a> (anchor) tag.
§ A list denoted using the
<ul> (unordered list), <ol> (ordered list) and <li> (list
element) tags.
§ An image, denoted using
the <img> tag
§ A divider, denoted using
the <div> tag
§ A text span, denoted using
the <span> tag
§ The next few pages will
give an overview of these basic HTML elements.
§ Each element can also have
attributes - each element has a different set of attributes relevant to the
element. There are a few global elements, the most common of them are:
·
Id: - Denotes the unique ID of an element in a page. Used for
locating elements by using links, JavaScript, and more.
·
Class: - Denotes the CSS class of an element.
·
Style: - Denotes the CSS styles to apply to an element.
·
Data-x: - A general prefix for attributes that store raw
information for programmatic purpose.
Text headers and
paragraphs
§ There are six different
types of text header you can choose from, h1 being the topmost heading with the
largest text, and h6 being the most inner heading with the smallest text.
§ As we've seen in the last
example, a paragraph is a block of text separated from the rest of the text
around it.
Horizontal rulers
§ A horizontal ruler
<hr> tag acts as a simple separator between page sections.
Links
§ A link
("anchor") is a small span of text that will direct you to a
different section in the page, or to a different page.
Lists
Ordered lists
§ Ordered lists have a
“type” attribute which defines the numbering convention to use.
Advantages of CSS3 over CSS
CSS3
a new version of CSS or cascading style sheet benefits from technical features
and properties. From better maintenance, loading speed, and layout design
properties CSS3 is much more versatile. Designers get to implement the design
elements from CSS3 in a simpler manner. In this article, we would discuss the advantages
of CSS3 over CSS.
Multi column
layout-The
CSS3 is beneficial over CSS as it has multi column layouts without use for
multiple divS. Following the use of CSS3 the browser would accept the
properties and create columns. These layouts are supported by safari 3, safari
4 and firefox 1.5.
Multiple
backgrounds-CSS3 adds multiple layered backgrounds to an element using multiple
properties. This property from CSS3 adds to a visual programmer or designer’s
workflow. The property also helps in reducing the markup for the design. There
is a significant reduction to the workflow effort.
Text shadow-The text shadow property
from CSS3 is a widely accepted advantage for web designers. The property
provides web designers with the ability to have a cross browser tool. This
property adds dimensions to designs and makes text stand out. The text then has
added depth and dimension.
@font-face-Attribute-This technology brings the
custom embed to fonts easily for the designer. The property brings better
typography to web design and also makes the attribute usable in practice. This
is one of the more highly anticipated properties.
Border
Radius-The
border- radius property provides a curved corner to all the background images.
This is one of the most widely used properties. The web design that results is
cleaner and the development process for design is more efficient. The property
is not critical to design, yet is an important facet to design process and
development.
Border Image-The property for border
image indicates the image of the border for an element. This property would
give a consistency to design elements with scaling and tiling of the borders.
Although not a highly sought after design property, this property further
amplifies border image styling.
Box shadow-The property adds a shadow
to the design without extra markup and background images. The box shadow
enhances the design details without affecting content readability. The box
shadow adds further multiple values while the horizontal and vertical offsets
as also shadow colors are more commonly used.
Box Sizing-The property is especially
useful in subtracting padding and border to a specified height and width. From
this property the designer gets to know the exact specifications to the browser
calculations of width and height of an element.
Media
queries-The
property for the media queries defines different styles for different devices
based upon their capabilities. A very useful property as the designer would not
essentially have to write separate style sheets for different devices. Also no
javascript would be required to assess the capabilities and properties of
user’s browser.
File size
and loading time-CSS3 prevails over CSS as a much better language for
supporting faster loading time. The CSS3 language builds upon a better file
handling and while the faster load time is important for the website with
higher traffic. Here the effect for loading time compounds further and benefits
the web designer.
Updations-CSS3 is important and
advantageous over CSS from updations and future proofing the websites from a
maintenance perspective. Numerous website features like rebuilding and
resizing, updating appropriate properties and uploads are maintained
effectively.
Conclusion-CSS3 is more advantageous
over CSS with a number of add-on properties. Most of these properties are a
benefit to the web designer and programmer. In this article, we have discussed
the advantages of CSS3 over CSS. Readers of the article are invited to submit
their comments and views.
CSS
Selectors
CSS styling can get very specific and
you can target less classes and IDs in the HTML markup, and instead target
cascading HTML elements – here we take a look at the various CSS Selectors, and
give some simple examples of how the selector is written and what it targets.
Descendant
Selector
The descendant selector works down
the HTML structure in order of what has been written and selects any elements
which are a child, descended from the parent element
div p {
//css-styles
}
In this instance all <p> tag
that descends from its parent <div> will be targeted.
Child
Selector
A child selector selects the
immediate child of the parent selector and a ‘greater than’ sign > is used
between parent and child, so this will select multiple child elements if they
exist.
div > p {
//css-styles
}
Selects all paragraphs in the
<div>, the selector selects all <p> tags that are children only of
the <div> tag, but not any <p> tags that are not immediate children
of the parent
div article > h2 {
//css-styles
}
Combines a descendant selector with a
child selector, selecting any <h2> element that is a child of an
<article> that descends from a <div>
So what is
the difference between a child and descendant selector?
<div><p>this is div
text</p><article><p>this is article
text</p></article></div>
div p {
//css-styles
}
The selector above ,selects all
<p> tags that descend including <p> tags nested in other child
elements of the <div>, so in the example of HTML above will also select
the <p> tag in the <article>.
<div><p>this is div
text</p><article><p>this is article
text</p></article></div>
div > p {
//css-styles
}
The selector above , selects only
<p> tags that are immediate children of <div> – so not the
<p> tag in the <article>.
<article><p>this is
article text</p></article>
This <p> tag wouldn’t be
selected in this instance.
Adajcent
Selector
The adajecent selector selects
elements based on the preceding element and separated by a plus sign in the
selector ‘+‘
p+p {
//css-styles
}
selects the 2nd <p> tag
h2+p+p {
//css-styles
}
selects the 2nd <p> tag
following a <h2> tag
div>h2+p+p {
//css-styles
}
mixing a child and an adjacent selects the 2nd <p> tag following a
<h2> tag which is a child of a <div> tag
Attribute
Selector
The attribute selector can select a
HTML element based on an attribute assigned to it and more extensively selected
by adding in the value of the attribute. The attribute is selected by
surrounding the attribute name in [brackets] superceding the HTML element or by
adding in the value by preceding it with an equals sign ‘=’ and surrounding it
in “double quotes”
So the attribute is selected
p[class] {
//css-styles
}
Any <p> tag with a class
attribute is selected
p[class="first"] {
//css-styles
}
Any <p> tag with a class
attribute of ‘first‘ is selected
input[type="submit"] {
//css-styles
}
This selects the input element with a
type of submit
Further to this type of selecting
which is very cool, you can add in textual pattern matching with ~, $, *,
^, which can select multiple elements
with matching patterns in the value of the attribute, how they are formatted
are as follows:
[unordered_list style=”star”]
~ = includes
$ = ends
* = matches
^ = starts
p[class~="first"] {
//css-styles
}
Selects all <p> tags which
include a value of ‘first‘ as a class
value literal string
a[href^="http://"] {
//css-styles
}
Selects all <a> tags with a
starting value of http:// in the href attribute
a[href$=".pdf"] {
//css-styles
}
Selects all <a> tags with an
ending value of .pdf in the href attribute
h1[title*="staff"] {
//css-styles
}
Selects all <h1> tags with a
matching ‘staff‘ word in the value of
the title attribute
div[class^="wp-caption"] {
//css-styles
}
Selects all div tags with a starting
class name of wp-caption in the class attribute
This dynamic pseudo selector
specialises in selecting elements in their various states, mostly for the
different link states – a word pattern, ‘Love Hate’ is sometimes used to
remember the order that they are best set, they are separated from the
preceding element with a colon and no space “:”
a:link {}
a:visit {}
a:hover {}
a:active {}
Typically they are used for
links tags <a> but can be used for
any element.
Also you can target anchor links when
used with the #anchor-link-name in the URL and is selected like so
a:target {
//css-styles
}
Structural
Pseudo Class Selector
The structural pseudo selector allows
you to select elements based on their structural position in the HTML markup
p:first-child {
//css-styles
}
Selects the first and only <p>
tag from its parent element and subsequent <p> tags from adjacent similar parent elements – but only if it is
actually the first <p> element if another element precedes it, it doesn’t
get selected.
p:first-of-type {
//css-styles
}
Selects the first <p> tag from its parent element and
subsequent <p> tags from adjacent
similar parent elements, if another element precedes it, it still does
get selected.
p:only-child {
//css-styles
}
Selects the existence of a single
<p> tag within its parent element
These can also be used with the words
‘last-child‘ and ‘last-of-type‘.
nth-Child
Pseudo Class Selector
This pseudo class selector targets
elements based on numbering of elements in the HTML mark up, its format is also
structured by the element a single colon :, followed by nth-child and then a
numbered argument surrounded by brackets. This selector is typically used in
list item mark up but can be used with other HTML elements.
li:nth-child(5) {
//css-styles
}
Selects the 5th <li> item in a
list.
li:nth-child(5n) {
//css-styles
}
Selects every 5th <li> item in
a list.
li:nth-child(odd) {
//css-styles
}
Selects every odd <li> item in
a list.
li:nth-child(even) {
//css-styles
}
Selects every even <li> item in
a list.
li:nth-child(5n+3) {
//css-styles
}
Selects every 5th <li> item in
a list starting after the 3rd <li>, the 3rd <li> in this case is
also selected.
li:nth-child(-5n+3) {
//css-styles
}
Using a minus makes the count start
the other way – here the count starts at the 3rd from the end and selects that
and every 5 element going up.
A variation on nth-child is
nth-last-child which be default works upwards in structure rather than
downwards.
li:nth-last-child(2n+5) {
//css-styles
}
Starts from the bottom 5th element
and selects every 2nd <li> going upwards, using a negative value here
would go downwards.
Another variation on nth-child and
nth-last-child is nth-of-type and nth-last-of-type – the difference between
these types are that the latter are more strict in terms of selecting the
element type whereas the former is more constrained by the structure of the
markup; parent/child relationship.
div.field-item p:nth-of-type(3n) {
//css-styles
}
Select every 3rd sequential <p>
tag that is a descendant of a <div> with a class of ‘field-item‘
Pseudo
Element Selector
The pseudo element selector makes
selections based on element position, it has slightly different syntax using a
double colon :: between element and selector, the double colon is the official
CSS3 syntax, however it is not supported by IE8, you can actually use a single
colon : which is from CSS2 syntax and is supported by IE8, so decide to use
which one based on your thoughts around IE8.
p::first-letter {
//css-styles
}
selects the first letter of the word
that starts within the <p> tags
p::first-line {
//css-styles
}
selects the first line of the text
that is found within the <p> tags
Another use of the pseudo element
selector is to inject content before or after a targetted element – this
content is not part of the DOM and is not seen in the HTML markup, the content
can take the form of a literal string or an image if a URL is passed in, as
well as quotes and also values that are associated with an elements attribute.
p::after {content: " this text
follows";}
Adds in ” this text follows” after
every <p> tag.
a::after {
content: " "attr(href);}
Adds in a space followed by the href
attribute value and puts that content right after the <a> tag.
Conversely you can ::before, check out
how you can use it to create CSS only blockquotes by injecting a big quote
before the blockquote and an em dash before the author in the cite element, if
you use the snippet of code you will need to adjust the position values to fit
your page/markup:
The HTML
<blockquote><p>Blockquote
text goes here</p><cite>Quoted by
me</cite></blockquote>
The CSS
blockquote::before {
display: block;
color: #999999;
content: "\201C";
display: block;
font-size: 40px;
bottom:300px;
left: 20px;
position: absolute;}
blockquote cite {
color: #999999;
font-size: 12px;
display: block;
margin-top: 5px;}
blockquote cite::before {
content: "\2014 \2009";}
Advanced
Selectors in CSS
Selectors are used for selecting the
HTML elements in the attributes. Some different types of selectors are given
below:
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.
filter_none
brightness_4
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>
How to Use CSS Media
Queries in Responsive Design
By targeting the browser width, we can style content to look
appropriate for a wide desktop browser, a medium-sized tablet browser, or a
small phone browser. Adjusting the layout of a web page based on the width of
the browser is called "responsive design." Responsive design is made
possible by CSS media queries.
In this how to, you'll learn how to use media queries in
responsive design.
Start with an HTML page and a set of default CSS styles. These
styles will be used by the browser no matter what width the browser is.
<!DOCTYPE HTML>
<html>
<head>
<meta
charset="UTF-8">
<title>Media
Queries Example</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
body {
background-color:
#ccc;
}
#main
{
background-color:
#fff;
width:
80%;
margin:
0 auto;
padding:
2em;
}
article
{
float:
right;
width:
64.6666666%;
padding:
1%;
background-color:
#ffaaaa;
}
aside
{
float:
left;
width:
31.3333333%;
padding:
1%;
background-color:
#ffaaff;
}
footer
{
clear:
both;
}
</style>
</head>
<body>
<div
id="main">
<header>
<h1>Media
Queries</h1>
</header>
<article>
<h2>Main
Content</h2>
<p>This
is main content - it shows on right on desktops, on bottom on phones</p>
<p>This
is main content - it shows on right on desktops, on bottom on phones</p>
<p>This
is main content - it shows on right on desktops, on bottom on phones</p>
<p>This
is main content - it shows on right on desktops, on bottom on phones</p>
<p>This
is main content - it shows on right on desktops, on bottom on phones</p>
</article>
<aside>
<h2>Sidebar
Content</h2>
<p>This
is sidebar content - it shows on left on desktops, on bottom on
phones</p>
<p>This
is sidebar content - it shows on left on desktops, on bottom on
phones</p>
<p>This
is sidebar content - it shows on left on desktops, on bottom on
phones</p>
</aside>
<footer>
<p>This
is the footer - it shows only on desktops</p>
</footer>
</div>
</body>
</html>
After the footer styles, write the following media query.
This will apply the CSS within it whenever the browser width is less than or
equal to 700px.
@media screen
and (max-width: 700px) {
}
Between the curly braces of the media query, you can override
the default styles to change the layout of the page for smaller browsers, like
this:
@media screen and (max-width: 700px) {
article {
float:
none;
width:
98%;
padding:
1%;
background-color:
#ffaaaa;
}
aside {
float:
none;
width:
98%;
padding:
1%;
background-color:
#ffaaff;
}
footer {
display:
none;
}
}
Pros and cons of Internal,
External and inline use of CSS.
Inline CSS:
Inline CSS is when you write the style for that said section
of graphics at the same line as you write the code in. This is a good method
for people to use when they are just trying to change something in just one
specific style of a div. The main thing that we have to think of when we are going
to make inline CSS is that whatever we change it will over wright the CSS on
the the style sheets that you have made. This is more than likely a bad thing
to do because when you come to make something else that needs to have the same
features as the new style that you have made inline. for example if i was to
make a paragraph that needs to have blue text and we then make another
paragraph that needs to have red text but then we need another paragraph that
needs blue text and we have done this all inline. This becomes a massive
problem for us because when we come to make the second paragraph blue we need
to place the inline style’s in every time. so it is a lot more efficient to
simple make a new class for a blue paragraph and a red one. for example this is
the inline styles for the blue paragraph:
<!– <p style=”color: blue;”> this is
blue<p>–> (remembering that the <p> tag should end with a
</p> but i cant do this in Word pres so i have to show you like this.)
Internal CSS:
Internal CSS is when you use the <style> tags at the
top of the HTML document (or PHP). This is again not the proper practice that
we should be using when coding web sites for clients. This is because we are
making the files larger than they should be. Reasons why we would use Internal
CSS is if we are going to try a style on something really quick but we have no
real reason to place it on our style sheets. In the future you might end up
using it on a different page of your web and when that happens you will not be
able to use it as it is not linked to that page as a style sheet. At this point
we will need to move it into a style sheet and make sure it is all linked. A
good and simple example will be again a paragraph that we have made for that
page that just needs to be blue and another needs to be red. For example:
<style>
.blue{
font-color:blue;
}
.red{
font-color:red;
}
<body>
<p class=”blue”>hello blue<p> (remembering that
the <p> tag should end with a </p> but I can’t do this in Word
press so I have to show you like this.)
<p class=”red”>hello red<p>(remembering that the
<p> tag should end with a </p> but I can’t do this in Word press so
I have to show you like this.)
External CSS:
This is when we place all of our CSS on a external CSS style
sheet. This is the best practice for us as coders as we are able to set all of
the CSS external and not have to worry about it not working in different pages.
We can simple link all of the Style sheets with a simple line of html that
looks like:
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
this is a simple link to my CSS style sheet that imported
bootstrap into my site and allows me to make a web page that re sizes
everything to fit the size of the screen that they are viewing it on. So the
External style sheets is where you want to be if you are going into web
development. Here is a coding example on External CSS styling.
(In my CSS style sheet)
.blue{
font-color:blue;
}
.red{
font-color:red;
}
(And now on my html page all i have to place on it is)
<html>
<link ref=”css/mycss.css” rel=”stylesheet” />
<body>
<p class=”blue”>hello blue<p> (remembering that
the <p> tag should end with a </p> but I can’t do this in Word
press so i have to show you like this.)
<p class=”red”>hello red<p>(remembering that the
<p> tag should end with a </p> but I can’t do this in Word press so
I have to show you like this.)
JavaScript Frameworks, Libraries
and Tools
The JavaScript landscape changes on a daily basis. This
article will be out of date the moment it’s published.
By "best" I mean "the most popular/used/hyped
general-purpose projects". All have free/open source options but the list
may not include your favorites.
Discontinued projects such as YUI are not included even
though they may still have high use across the web.
Only client-side projects are referenced. Some can work
server-side but the list does not include pure server-based frameworks such as
Express.js or Hapi.
Information about each project is intentionally brief to
provide an overview for further research.
Each project provides a usage popularity indicator but
statistics are notoriously difficult to collate and can be misleading.
I’m biased. You’re biased. Everyone else is biased! I haven’t
tried every tool here and will declare my favorites but you should make your
own assessment based on your requirements.
Neither I or SitePoint are liable for any disastrous
decisions you make.
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.
Libraries normally provide a higher level of abstraction
which smooths over implementation details and inconsistencies. For example,
Ajax can be implemented using the XMLHttpRequest API but this requires several
lines of code and there are subtle differences across browsers. A library may
provide a simpler ajax() function so you’re free to concentrate on higher-level
business logic.
A library could cut development time by 20% because you don’t
have to worry about the finer details. The downsides:
a bug within a library can be difficult to locate and fix
there’s no guarantee the development team will release a
patch quickly
a patch could change the API and incur significant changes to
your code.
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.
A framework normally provides a higher level of abstraction
than a library and can help you rapidly build the first 80% of your project.
The downsides:
the last 20% can be tough going if your application moves
beyond the confines of the framework
framework updates or migrations can be difficult – if not
impossible
core framework code and concepts rarely age well. Developers
will always discover a better way to do the same thing.
Tools
A tool aids development but is not an integral part of your
project. Tools include build systems, compilers, transpilers, code minifiers,
image compressors, deployment mechanisms and more.
Tools should provide an easier development process. For
example, many coders prefer Sass to CSS because it provides code separation,
nesting, render-time variables, loops, and functions. Browsers do not
understand Sass/SCSS syntax so the code must be compiled to CSS using an
appropriate tool before testing and deployment.
New features in JS Version
6
Arrows
Arrows are a function shorthand using the => syntax. They
are syntactically similar to the related feature in C#, Java 8 and
CoffeeScript. They support both statement block bodies as well as expression
bodies which return the value of the expression. Unlike functions, arrows share
the same lexical this as their surrounding code.
// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));
// Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
// Lexical this
var bob = {
_name:
"Bob",
_friends: [],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
}
Classes
ES6 classes are a simple sugar over the prototype-based OO
pattern. Having a single convenient declarative form makes class patterns
easier to use, and encourages interoperability. Classes support prototype-based
inheritance, super calls, instance and static methods and constructors.
class SkinnedMesh extends THREE.Mesh {
constructor(geometry,
materials) {
super(geometry,
materials);
this.idMatrix =
SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices =
[];
//...
}
update(camera) {
//...
super.update();
}
get boneCount() {
return
this.bones.length;
}
set
matrixType(matrixType) {
this.idMatrix =
SkinnedMesh[matrixType]();
}
static
defaultMatrix() {
return new
THREE.Matrix4();
}
}
Enhanced Object Literals
Object literals are extended to support setting the prototype
at construction, shorthand for foo: foo assignments, defining methods, making
super calls, and computing property names with expressions. Together, these
also bring object literals and class declarations closer together, and let
object-based design benefit from some of the same conveniences.
var obj = {
// __proto__
__proto__:
theProtoObj,
// Shorthand for
‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed
(dynamic) property names
[ 'prop_' + (()
=> 42)() ]: 42
};
Template Strings
Template strings provide syntactic sugar for constructing
strings. This is similar to string interpolation features in Perl, Python and
more. Optionally, a tag can be added to allow the string construction to be
customized, avoiding injection attacks or constructing higher level data
structures from string contents.
// Basic literal string creation
`In JavaScript '\n' is a line-feed.`
// Multiline strings
`In JavaScript this is
not legal.`
// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// Construct an HTTP request prefix is used to interpret the
replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
Content-Type:
application/json
X-Credentials:
${credentials}
{ "foo":
${foo},
"bar":
${bar}}`(myOnReadyStateChangeHandler);
Destructuring
Destructuring allows binding using pattern matching, with
support for matching arrays and objects. Destructuring is fail-soft, similar to
standard object lookup for["bar"], producing undefined values when
not found.
// list matching
var [a, , b] = [1,2,3];
// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()
// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})
// Fail-soft destructuring
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
Default + Rest + Spread
Callee-evaluated default parameter values. Turn an array into
consecutive arguments in a function call. Bind trailing parameters to an array.
Rest replaces the need for arguments and addresses common cases more directly.
function f(x, y=12) {
// y is 12 if not
passed (or passed as undefined)
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6
Let + Const
Block-scoped binding constructs. let is the new var. const is
single-assignment. Static restrictions prevent use before assignment.
function f() {
{
let x;
{
// okay, block
scoped name
const x =
"sneaky";
// error, const
x =
"foo";
}
// error, already
declared in block
let x =
"inner";
}
}
Iterators + For..Of
Iterator objects enable custom iteration like CLR IEnumerable
or Java Iterable. Generalize for..in to custom iterator-based iteration with
for..of. Don’t require realizing an array, enabling lazy design patterns like
LINQ.
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur =
1;
return {
next() {
[pre, cur] =
[cur, pre + cur];
return { done:
false, value: cur }
}
}
}
}
for (var n of fibonacci) {
// truncate the
sequence at 1000
if (n > 1000)
break;
console.log(n);
}
Iteration is based on these duck-typed interfaces (using
TypeScript type syntax for exposition only):
interface IteratorResult {
done: boolean;
value: any;
}
interface Iterator {
next():
IteratorResult;
}
interface Iterable {
[Symbol.iterator]():
Iterator
}
Generators
Generators simplify iterator-authoring using function* and
yield. A function declared as function* returns a Generator instance.
Generators are subtypes of iterators which include additional next and throw.
These enable values to flow back into the generator, so yield is an expression
form which returns a value (or throws).
Note: Can also be used to enable ‘await’-like async
programming, see also ES7 await proposal.
var fibonacci = {
[Symbol.iterator]:
function*() {
var pre = 0, cur =
1;
for (;;) {
var temp = pre;
pre = cur;
cur += temp;
yield cur;
}
}
}
for (var n of fibonacci) {
// truncate the
sequence at 1000
if (n > 1000)
break;
console.log(n);
}
The generator interface is (using TypeScript type syntax for
exposition only):
interface Generator extends Iterator {
next(value?: any):
IteratorResult;
throw(exception:
any);
}
Modules
Language-level support for modules for component definition.
Codifies patterns from popular JavaScript module loaders (AMD, CommonJS).
Runtime behaviour defined by a host-defined default loader. Implicitly async
model — no code executes until requested modules are available and processed.
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
Some additional features include export default and export *:
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.log(x);
}
// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);
Module Loaders
Module loaders support:
Dynamic loading
State isolation
Global namespace isolation
Compilation hooks
Nested virtualization
The default module loader can be configured, and new loaders
can be constructed to evaluate and load code in isolated or constrained
contexts.
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
alert("2π =
" + m.sum(m.pi, m.pi));
});
// Create execution sandboxes – new Loaders
var loader = new Loader({
global: fixup(window)
// replace ‘console.log’
});
loader.eval("console.log('hello world!');");
// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet
finalized
Library vs. Framework?
What is the difference between a Java Library and a
framework? The two concepts are important but sometimes confusing for Java
developers.
Key Difference and
Definition of Library and Framework
The key difference between a library and a framework is
"Inversion of Control". When you call a method from a library, you
are in control. But with a framework, the control is inverted: the framework calls
you.
A library is just a collection of class definitions. The
reason behind is simply code reuse, i.e. get the code that has already been
written by other developers. The classes and methods normally define specific
operations in a domain specific area. For example, there are some libraries of
mathematics which can let developer just call the function without redo the
implementation of how an algorithm works.
In framework, all the control flow is already there, and
there's a bunch of predefined white spots that you should fill out with your
code. A framework is normally more complex. It defines a skeleton where the
application defines its own features to fill out the skeleton. In this way,
your code will be called by the framework when appropriately. The benefit is
that developers do not need to worry about if a design is good or not, but just
about implementing domain specific functions.
2. Their Relation
MVC Tutorial for
Beginners: What is, Architecture & Example
What is MVC?
The MVC is an architectural pattern that separates an
application into three main logical components
Model
View
Controller
History of MVC
MVC architecture first discussed in 1979 by Trygve Reenskaug
MVC model was first introduced in 1987 in the Smalltalk
programming language.
MVC was first time accepted as a general concept, in a 1988
article
In the recent time, MVC pattern is widely used in modern web
applications
Features of MVC
Easy and frictionless testability. Highly testable,
extensible and pluggable framework
Offers full control over your HTML as well as your URLs
Leverage existing features provided by ASP.NET, JSP, Django,
etc.
Clear separation of logic: Model, View, Controller.
Separation of application tasks viz. business logic, Ul logic, and input logic
URL Routing for SEO Friendly URLs. Powerful URL- mapping for
comprehensible and searchable URLs
Supports for Test Driven Development (TDD)
MVC Architecture
View
A View is that part of the application that represents the
presentation of data.
Views are created by the data collected from the model data.
A view requests the model to give information so that it resents the output
presentation to the user.
The view also represents the data from chats, diagrams, and
table. For example, any customer view will include all the UI components like
text boxes, drop downs, etc.
Controller
The Controller is that part of the application that handles
the user interaction. The controller interprets the mouse and keyboard inputs
from the user, informing model and the view to change as appropriate.
A Controller send's commands to the model to update its
state(E.g., Saving a specific document). The controller also sends commands to
its associated view to change the view's presentation (For example scrolling a
particular document).
Model
The model component stores data and its related logic. ItThis
represents data that is being transferred between controller components or any
other related business logic. For example, a Controller object will retrieve
the customer info from the database. It manipulates data and send back to the
database or use it to render the same data.
It responds to the request from the views and also responds
to instructions from the controller to update itself. It is also the lowest
level of the pattern which is responsible for maintaining data.
No comments:
Post a Comment