Cairo University

Faculty of Graduate Studies for Statistical Research

Department of Computer and Information Sciences

Software Processes
Lec. 5 outline: You’ll find all the information you need here on
Frontend Development, Your first HTML file rendered in a browser,
Where Does Frontend Start?, Markup, DOM, Style: Nice
components, Design Systems, Dynamic Content, Frameworksg
..., and so on..
Tarek Aly
01126182476
[Link]
E-mail: tarekmmmmt@{[Link]; [Link]; [Link]; [Link]}
 Requirements: Minimum Viable
Product (MVP)
 If we think about it, we will almost
immediately define the needed
requirements:
 It must have wheels.
 It must have a board.
 It must have some sort of mechanism that unifies
the board and the wheels together.
 It must move using the wheels attached to the
board.
 It must have a brake mechanism.
 These are indispensable requirements.
Without these our skateboard is not a
skateboard. Then you can define some
nice-to-have features, like beautiful design
of the board, ergonomics, jumping capacity,
electrical motor, whatever.
Software Processes
 Engineering: The Team Around
the Product
 Engineering: is about creativity, innovation,
technology, and processes. Even Wikipedia knows
this: Engineering is the creative application of
science, mathematical methods, and empirical
evidence to the innovation, design, construction, and
maintenance of structures, machines, materials,
devices, systems, processes, and organizations.
 That is why it is really important to have a technical
person with you. Let’s, for example, think of the
roadmap for the MVP skateboard.
 Build wheels: 2 weeks
 Build board: 1 week
 Attach wheels to the board: 3 weeks
 Attach the braking mechanism: 2 weeks
 Test: 2 weeks

Software Processes
The agenda for the kick-off
meeting
 The description of the project (10 minutes)
 Why are we doing this? (5 minutes)
 Discussion of requirements (5 minutes)
 Discussion of dependencies (e.g., technological needs or third-
parties dependencies) (10 minutes)
 Timeline and roadmap (15 minutes)
 Roles and responsibilities (10 minutes)
 Questions and answers (10 minutes)

Remember, every project is very unique and requires different

approaches to be kicked off.

Software Processes
Message’s three dots feedback when
someone is typing a message to you

Software Processes
Backend Development: About the
Stack
 In this chapter they are going to start our project by building our
backend application (Bootstrapping, data storage, … ) that will
support everything needed by the frontend application later. The
purpose is that in the end you get an idea on what you need in
order to build a backend application and how these pieces work
together.
 Actually, they don’t believe that there’s a “best stack”; they believe
there are a set of good stacks for what you want to do—some
better than others depending on the nature of the project (Ex:,
More comfortable with a specific programming language). They
decided to write the backend application in Java 8. Installations,
commands, etc., will be done using Ubuntu Linux version 16.04
LTS.

Software Processes
 Agenda
 Frontend Development
 Your first HTML file rendered in a browser
 Where Does Frontend Start?
 Markup
 Document Object Model: DOM
 Style: Nice components
 Design Systems
 Pre-Processors and Template Engines
 Dynamic Content
 Frameworks
 Contract Between Frontend and Backend
 Creating the Frontend Application for Our Platform
Software Processes
Frontend Development
 The product manager connects business needs and development,
the designer connects product and business goals to the user
needs, the backend developer connects data to the product, and,
finally (actually, not yet), our frontend developer will connect the
backend and the design. Yes, software development is all about
connecting several blocks.
 Software engineers, aim at connecting people and technology.
 In the previous lecture, we prepared the behind the scenes for our
data. In this lecture, we will use the prepared endpoints to bring the
data to the user and display it in the user interface.
 There is no software creation without coding and be prepared to
write some code.

Software Processes
 Build Automation Let’s Code! Your first
HTML file rendered in a browser
 Open your favorite text editor and type, “Hello my dear friend!
♥” Exactly like this. Now save this file as [Link].

<div style='text-align:center'>
<h1>Hello my dear friend!
<span style='color:red'>&hearts;</span>
</h1>
<img
src=[Link]
c&type=gif />
Adding the color to the text, playing with
</div> images, and centering the Content

Software Processes
Build Automation Let’s Code! Your first
HTML file rendered in a browser Cont.
 Every time you refresh the page, the cat picture will change. This is,
actually, how the internet works—it is just full of cats, all the rest is
just noise. Let’s just add a last line of code.

<div style='text-align:center'>
<h1>Hello my dear friend! <span style='color:red'>&hearts;</span></h1>
<img src='[Link] />
</div>

<script>
const src = '[Link]
setInterval(() => {
[Link]('img')[0].src = src + '&ts=' + [Link]()
}, 3000)
will see that every 3 seconds the cat picture changes.
</script>
Software Processes
Where Does Frontend Start?
 While working on our backend,
we were already thinking how
we will pass the data to the
frontend.

 So, what is frontend? Frontend

is a visible part of our
application and a connection
between it and the backend.
Thus, besides being a face of
the application, frontend has
some invisible parts that
connect this face to the brain,
which is located on the
backend.

Software Processes
Where Does Frontend Start?Cont.
 You see that it consists essentially of three parts: HTML (hypertext markup
language), CSS (cascading style sheets), and JS (JavaScript). What are
all these? The HTML code defines the structure of our interface; the CSS
defines its style; and the JS defines how it changes overtime, and it is
responsible for communicating with the backend while guaranteeing that
all the changes that happen to data are propagated to our interface. These
are the three pillars of frontend development.

 A lot of buzzwords like less, sass, react, redux, [Link], bootstrap, material
design, serverless (uhh) —but remember, in the end browsers really
understand and can interpret these three things: HTML, CSS, and
JavaScript. Basically, the browser parses our HTML code, styles it with our
CSS code, and interprets our JavaScript code to apply whatever we tell it
to do.

Software Processes
Markup
 Markup is the skeleton of our application. Markup defines the structure of your page
and the placeholders for its content. For more than a couple of decades (developed
in 1993), HTML has been used for creating web pages and web applications.
 In a nutshell, the HTML document is composed of a set of tags, their attributes, and
the content for these tags.

 HTML tag: Can be seen as a container that defines a semantic of an enclosed content. Each tag is
written in the angle brackets (e.g., <p> -paragraph tag). Tags can open and close—for example,
<p> defines a start of a paragraph while </p> defines its end.

 HTML attribute: Some tags can have some attributes that tell and define a little bit more about the tag
container besides its semantics. Attributes can have different values. The attributes are written inside
the opening tag, and their values are written inside quotes after the equal sign. For example, the title
attribute can be applied to any tag and will create an effect of appearing text while you hover the
mouse over the element that contains this title (e.g., <p title="my nice paragraph"></p>).

 Content of the HTML tags: whatever text appears inside the tags is the content of your page.
<p title="my nice paragraph">Hello reader! </p>

Software Processes
Document Object Model: DOM
 DOM (document object model) is basically a structure created by the
browser once it opens any web page. It is represented as a tree since the
browser render engine reads the markup code from top to bottom.

DOM tree representation

Software Processes
DOM: Cont.
 So, the browser knows exactly how to read and interpret it.
 Inside the html tags there are two main containers <head> and
<body>. <head> tag - Contains all the meta data about your
web page—its title, description, language, any search engine
optimization (SEO) related data, favicon path, etc.
 All the content that will appear on your page should be ontained
inside the body tags.
<html>
<head></head>
<body></body>
</html>

 Note that the tags are like boxes with the content inside of them. Boxes can
contain other boxes, and those can contain other boxes as well. Defining structure
and content of the webpage.
 Let’s talk about some of the tags.

Software Processes
DOM: Cont.
 Headings
<h1>Hello reader!</h1>
 Hyperlinks
<a href="[Link]
 Images

<img src="[Link] />

it closes itself. Such tags are called “self-closing” tags

<img src="img/[Link]" width="500px" />

 Nowadays, software is being built based on the paradigm of

“mobilefirst,” which means that number one priority is to make sure that
the product will appear nicely on mobile devices. It is quite
understandable—people these days use mobile devices a lot more than
desktop devices.
Software Processes
DOM: Cont.
 Forms: You use HTML to ask data from your users. These input fields. Input tags
(<input>) are also self-closing tags that can have several attributes specifying the
exact input field type.
<input />
Active and inactive input tags: It is possible to have different types of inputs by
providing the attribute called type to the input tag like: password, number, date, e-
mail, checkbox, range, search
<form action="">
Name: <input type="text" placeholder="Type your name" />
Password: <input type="password" />
Age: <input type="number" />
Email: <input type="email" placeholder="example@[Link]" />
Your favorite color: <input type="color" placeholder="#eee" />
Date of birth: <input type="date" />
</form>
That is why HTML specification offers you a very important element called <div>. The
div tag means division. This tag doesn’t have any style attached to it, but it is very
useful to separate chunks of content from each other and style them differently.

Software Processes
DOM: Cont.
 Inline and Block Elements:
 Inline elements: Appear in the same line where they are being invoked. For example,
<a>, <img />, <span> are inline elements.
 Block elements: Occupy the full line and the next element will be rendered from the new
line. <div>, <p>, heading elements (<h1>–<h6>) are block elements.

<div>The quick <span style="color: brown">brown</span> fox jumps

over the lazy dog</div>

Span element used to style one word inside the full phrase

EXERCISE ABOUT HTML page N 147

Software Processes
Style: Nice components
 We need to adjust colors, fonts, size, alignment, positioning, background,
and many other things. To make our page appealing for an eye and
capable to run in any browser of any device.
 CSS is a language that is used to describe styling rules for the HTML
markup. The styling rule is written in a simple format—the name of the rule
followed by the colon and its value. So, for example, the rule for the red
text color will look as the following:
color: red;
 The rules can be applied to some specific element or to the group of
elements. This depends on the way you decide to specify those rules.
There are essentially three ways of specifying CSS rules:
Inline: the CSS rule is attached to a given element inside the tag
attribute called style:
<p style="color: red;">Hello! Here's the red paragraph</p>

Software Processes
Style: Nice components Cont.
Internal stylesheets: CSS rules are written inside the style tag and
Wrap it inside the head element of your html file.
<style>
p{
color: red;
}
</style>
External stylesheets: the CSS rules are written the same way they would be
written inside the style tags, just in the external file that has a .css extension
and imported to the html file using the special tag <link> contining the path to
the CSS file inside the href attribute:

This block is called selector, and this is one of the most important
concepts of the web development.

Software Processes
Style: Nice components Cont.
 Selector defines the group of elements to which we want to apply some
specific style. It can be described by tag, class, id, or a mix of them.
 The way we write selectors for class and id are different from the way we
write selectors for tag. So:
• Selector for tag is just a tag name:
• p—selects paragraph tags
• img—selects img tags
• div img—selects img tags inside div blocks
• Selector for an id of element is the value of the id preceded by #:
• #first—selects element with id “first”
• Selector for class is written as name of class preceded by a dot:
• .important—selects all the elements that have class “important”
CSS box model
• [Link]—selects all the paragraphs that have class “important”
• div [Link]—selects all the images that are inside divs and have class important
• #first .important—selects all the elements inside the element with id “first” that have class
“important”
Check more about selectors on the w3c page: [Link] css_selectors.asp.

Software Processes
Layout
 One of the most important challenges of CSS is to provide an easy way for
developers and designers to distribute their content on the page in a way that looks
nice and doesn’t break in different screen sizes.
 fter that, people would create absolutely positioned layouts and layouts based on
the float property of CSS; “float: left” would tell the element to stick to the left side
of the parent element, while “float: right” would tell the element to stick to the right
side. Combined with the relative width, it would allow building more or less flexible
layouts.
 lexbox (flexible box) is a way of positioning elements inside the container in a row
or in a column in a specific order and in a suitable way. Flexbox guarantees that
even if the sizes of the elements are dynamic, the layout remains flexible for any
device.
.container {display: flex;}
 [Link]

EXERCISE ABOUT CSS Page n 157

Software Processes
Design Systems
 You just enjoy the process of composing your software without being
worried about defining styling, positioning elements, writing complex CSS
rules, and creating animations for transitions.

 Check it out at [Link] It is open-source and totally free.

Check the file [Link], where we show how to implement our login
form using Bootstrap’s grid system and classes to style the components.

 The idea behind all these systems is very simple: the developers should
focus on developing products, and these tools should help them in
achieving the needed visual effects in a fast and friendly way.

 Tools are here to reduce your development time and not to increase it!

Software Processes
Pre-Processors and Template
Engines
 The developers like the DRY and KISS principles very much—that’s why
they constantly come up with new languages to make their life easier.

DRY principle means “Don’t Repeat Yourself” and KISS means “Keep It
Simple Stupid!”
That’s why they constantly come up with new languages to make their life
easier. These languages are called pre-processors or templating engines for
HTML and are basically programming languages that decrease developing
time by providing a means of code reusability and reducing the amount of
code itself. After writing in these languages, you have to apply special tools
called transpilers that will transform this code into the HTML and CSS again,
so browsers are able to process them. There are plenty of them. So, for
HTML you have, for example, the following:
 HAML: HTML abstraction markup language
 Jade: template engine

Software Processes
Jade
 In Jade, you would do something like this:
 As you can see, template engines for HTML
.container
remove unnecessary code and even provide
#[Link] means to reuse templates inside the
h2 Log in templates; so, for example, you can have a
form template for footer and just include it in other
.form-group templates, so you don’t have to repeat the
label(for='email') Email code. That is pretty useful.
input#[Link]-control(type='email',
placeholder='youremail@[Link]')  The two most popular tools for CSS are Sass
It will be very similar in HAML: ([Link] and LESS
.container ([Link]
#[Link]
%h2 Log in
%form  Sass is a CSS extension language that
.form-group means “Syntactically Awesome Style
%label{:for => "email"} Email Sheets”.
%input#[Link]-control{:placeholder => "youremail@[Link]",
:type => "email"}/

Software Processes
Dynamic Content
 JavaScript! JavaScript is a high-level interpreted programming language.
Being high-level programming language means that the code is closer to
human than to the machine, so it’s easy for humans to read. Being
interpreted means that it doesn’t need to be compiled before being
executed (like, for example, Java). It is interpreted by browsers during the
runtime.
 Please note, although half of the name of the JavaScript language is Java,
it doesn’t have anything to do with the Java programming language! Some
people even say, “JavaScript to Java is like Car to Carpet.”
 Since JavaScript runs on the client side, it has access to the properties of
the browser of the client; again, be careful about the information you
access and use—the data protection laws don’t sleep!

Software Processes
Development Tools Console
 The easiest way to try JavaScript is using the development tools console.
It exists in most of the browsers. We will show the Chrome developer tools
here.
1. Opening developer tools console in Chrome
2. With developer tools opened, click on the Console tab. Now you can type some
JavaScript code, and it will immediately execute it. Type, for example, 2 + 2
followed by Enter. You will see
3. JavaScript executed in chrome devtools console
4. Now type new Date() and click Enter.
5. Type alert(new Date()),

Software Processes
Variables
 type var myVar = 10;
 type myVar
 Including JavaScript
 You include your JavaScript code in your pages the same way you include
your CSS
<body>
<script>
alert(new Date())
</script>
</body>

<script src="[Link]"></script>

EXERCISE ABOUT THE DATE OBJECT IN JAVASCRIPT page N 165

Software Processes
Functions
 Do you remember that developers strive for code reusability? That is why
JavaScript has functions.

 To declare a function in JavaScript, invoke the function statement followed

by the name of the function, parenthesis, and curly braces for the function
body:
function myFunction () {
// JavaScript statements
}
myFunction()

EXERCISE ABOUT SETINTERVAL IN JAVASCRIPT Page N 168

Software Processes
Frameworks
 Of course, you can write the whole software using just plain JavaScript, from
small to a huge scale, starting from famous jQuery, Backbone, Ampersand,
React, Angular, Meteor, Ember, Vuejs... The list is endless. Some of them
come with already pre-built themes, Sass and Less support, reusable
components, utility functions, plugins, add-ons, etc.
 My suggestion would be: don’t use frameworks just for the sake of using
frameworks. If you have a simple web page that you can create and maintain
on your own using plain HTML+CSS+JS stack, do it! In the end, all the code
built with frameworks will be transpiled into this trio. Of course, if you have a
big scale architecture, a lot of data to deal with, different transitions,
conditions, and huge complexity, then totally yes, check frameworks. Keep in
mind that frameworks require some learning curve. Check comparison tables
and decide what and how you need.
 Each person has to prepare a POC (proof of concept) using the chosen
framework and present it to the group. Then the group decides which of the
frameworks answers the project’s need most.

Software Processes
Frameworks Cont.
 If you are interested in learning [Link] while building interesting projects with
it, check out these books that Olga wrote:
 Learning [Link] 2 [Link] learning-vuejs-2
 [Link] and Bootstrap 4 Web Development [Link] com/web-
development/vuejs-2-and-bootstrap-4-web-development.

Not so long ago, a lot of web developers were using jQuery ([Link]
to modify the DOM structure and communicate with server (among thousands of
other things offered by this framework).

 Beauty lies in how nicely it simplifies all the DOM-related operations. For
example, this line of code:
[Link]('container').innerHTML = 'hello'
can simply be replaced by
$('#container').html('hello')

Software Processes
Frameworks Cont.
 jQuery provides an easy way of calling these methods on given endpoint and retrieving data or
passing it to server. jQuery’s method is called ajax(), and it receives a URL as an argument and,
when needed, data to pass to server.
 Ajax means asynchronous JavaScript and XML. This is actually one of the most misleading
abbreviations in web development. First, using ajax, you can run both synchronous and
asynchronous calls. Second, no one uses XML anymore for transporting data through the
network.
 To use the ajax() method, you simple call $.ajax(URL, [data]). Check the full documentation on
the official jQuery page: [Link]
 Besides the ajax method, jQuery provides shortcuts like .get() and .post(). This way you don’t
need to pass the configuration object as a parameter specifying which HTTP method you want
to use in some specific case.
 Thus, our post should have both the .then and .catch methods attached so we can execute
some code when the login is successful or when it fails. This will look like the following:

$.post('[Link] { // Do something
<...> })
.catch( error => {
})
// do something
.then(result => { })

Software Processes
Contract Between Frontend and
Backend
 We had to establish a kind of contract
JSON (JavaScript Object Notation) is a
common format used in web
development. This format is easy for
humans to read, easy for the browser to
interpret, can easily be iterated by
JavaScript, and is easily generated by
any backend language.

"paths" : {
"/api/v1/public/courses" : {
"get" : {
"summary" : "Lists the available courses.",
"operationId" : "list",
Software Processes
Creating the Frontend
Application for Our Platform

Step by step page N 177

Software Processes
Thank You

2022-09-08 Software Processes 35/112