THE WEB APPLICATION DEVELOPMENT CYCLE

The development of Web applications requires the same iterative phases as other applications; however, the
Web application itself is not the same as traditional applications.

A traditional application requires a special set of files during development, but distributes different outputs. For
example, the class files, image files, and source code files used to develop a Java applet can reside in a single
Microsoft® Visual J++™ project. For distribution, however, those files are compiled into a single executable
that is independent of the files kept in the developer's Visual J++ project. The resulting executable does not
require the presence of the source code files that were used to develop it.

Web applications, on the other hand, are composed of the same set of files used during development and after
deployment. There is no compiled executable file produced that becomes the Web application. For example, the
.htm, .asp, and .exe files in your Web project are the same files you propagate to your production Web server.
The source code, or script, in these Web files is executed on the client or server only when a browser requests
the Web page.
Source files and outputs for traditional and Web applications

You typically consider the following process in developing your Microsoft® Visual InterDev™ Web
application:
 Planning a Web Application
 Building a Solution
 Creating and Testing Web Items
 Deploying and Maintaining a Web Application
PLANNING A WEB APPLICATION
You can use the Visual InterDev tools to get a fast start on your Web application development. You can save
even more time with careful planning. If you address a few issues in the early stages of development, you are
better able to implement features and functionality efficiently. For example, the design decisions you make at
the start can impact how you create items in the Web application.

1
When you plan your Web application, consider the following activities before creating your Web solution.
 Identifying the Audience and the Browser
 Specifying the Web Application’s Purpose
 Determining Content
 Analyzing Development Resources
IDENTIFYING THE AUDIENCE AND THE BROWSER
A primary consideration in planning is identifying who will use the Web application—the audience. You can
define your Web application’s audience by identifying those who have access to the Web application and the
type of Web browser they use. Access can come through an intranet, the Internet, or an extranet. An extranet is
an area on a Web site available only to a set of registered visitors.
In many respects, access to the Web application helps you to determine the type of browser your Web
application needs to accommodate. For example, if the Web application is designed for an intranet, typically
you know which browser everyone is using and can program your Web application to take advantage of its
features.
The capabilities of the Web browser also shape your plans for using client and server script in your Web
application. Using server script and Active Server Pages (ASP), you can generate browser-independent pages
easily. The server processes the server script and then sends HTML to the browser for processing. In contrast, if
you know what type of browser the user will have, you can use client script to generate the page and minimize
the load on the server. Depending on the needs of your Web application, you can incorporate both to take
advantage of your system and the capabilities of your target audience.
The audience also determines what type of run-time security your Web application needs. Do you want
everyone to be able to read the Web application’s pages? Are some pages for everyone and other pages only for
those meeting certain criteria? For example, you might want your download page available to those who
completed a particular form.
SPECIFYING THE WEB APPLICATION’S PURPOSE
Another key factor in development is the purpose of the Web application. For example, your Web application
may be a set of announcement pages that inform visitors of current events. Maybe your Web application is an
order-entry component on a large commercial Web site. Your Web application might be a game designed to
attract Web visitors and introduce them to products sold on the site.
After you clearly specify the Web application’s purpose, you can determine the features and functions that
define the visitor’s experience.
DETERMINING CONTENT
The content includes all of the Web items and design elements used to specify the features of your Web
application and fulfill the Web application’s purpose. For example, content for announcement pages can be
implemented using simple HTML pages or using a database connection to populate an Active Server Page. An
order-entry Web application can incorporate a variety of forms and database transactions using server script
processing and client script processing. A game Web application can be created using Java applets or dynamic
HTML and page objects to take advantage of quick client-side processing.
Before you plan the details, you might want to review the variety of content you need to consider and explore
which Visual InterDev tools can implement your design quickly.

2
Some tools, such as the wizards and templates, quickly implement content without your having to plan the
details. Other tools, such as the design-time controls, let you worry about the details of a design while the tool
takes care of the code and script for implementing the design.
You can consider this list to help plan content to include in your Web application.
 Visual design and site navigation using themes and layouts
 Web application introduction and general information
 Database integration for displaying, updating, adding, or deleting records
 Web application control
 Forms and interactive pages
 Script for conditional processing
 Design-time and run-time security
Details about tools to use and implementation ideas are covered in Building a Solution and Creating and Testing
Web Items.

NALYZING DEVELOPMENT RESOURCES

Your development resources affect how you plan and design your Web application. Here are some questions to
help you analyze your development resource combination.
Who is on your development team?
Do you have a team of Web developers? Does your team include content authors and graphic designers? Do
you want to use source control? Should source control be set to allow multiple checkouts of a single file or
should it impose exclusive checkouts? What security levels do each of the team members need? What tools
does developers need on their workstations?
The answers to these questions help you decide whether you need to use source control and what type of
design-time security you need to consider.
If you are on a team, you probably want everyone to work in Web projects using local mode. Local mode
allows the developer to work in isolation from changes made by other developers.
By working with a team of developers, you can blend the skills of different developers to create Web
applications that would be difficult or impossible for a single developer to create. When working on a team, the
following concepts become important.
Work Simultaneously with Web Projects Visual InterDev allows multiple developers to work with files in the
same Web application at the same time. For multiple developers to work on the same Web application, it must
first exist on the master server. Developers can then create local project files that point to this Web application.
This allows developers to maintain their own option settings and their own local copies of the master files.
If your team includes authors using Microsoft® FrontPage®, they can also refer to your Web application in one
of their projects.
Source Control Because all files reside on the master server, more than one person can work with the Web
application files at a time. Multiple users can get files from the server, work with them, and then update the
server copy with their changes.
To prevent more than one user from changing the same file at the same time, you can install Microsoft ® Visual
SourceSafe™ 5.0 or later and enable source control for your project.
Multiple Checkouts and Merge Resolution With multiple developers, you can also have more than one
person working on the same file at a time. For example, you might have an author working on the content and a

3
developer changing some script in the same file. When the file is updated on the master server, the second
person saving the changes has the opportunity to merge the differences.
What is your development system?
Do you have a single developer workstation with both the server and client components needed to develop and
test a Web application? Are your Web server components, database development components, and developer
tools on separate machines? What level of design-time security does your Web application require?
The location of the components affects how you test your Web items and the Web application. For example,
Web applications tested locally without a local Web server cannot process Active Server Pages. If you don’t
have a copy of a Web server on your developer workstation, you might want to consider using a Web project in
master mode so that you do not have to explicitly update the master and test on the master server.
What is your testing system?
Do you have a testing or staging server that the team uses simultaneously for development? Do your team
members each develop their files locally, then move them up to the staging server? Where does your test
database reside?
The locations for testing help determine which project mode you want to use. Preferably testing and
development of individual pages is isolated from the testing performed on the master version by setting your
project to use local mode.
What is your deployment system?
Are you deploying your Web application on the same Web server that you are using for testing? Is your master
server also your production server? Where does your production database reside? What level of run-time
security does your Web application require of the deployment server?
The relationship of your testing server and production server determines how you perform some server
management and file management tasks. Preferably, Web applications under development and the production
versions are maintained on separate machines.

DEVELOPING ENTERPRISE APPLICATIONS

As most people use the term, an enterprise application is scalable, distributed, component-based, and mission-
critical. Enterprise applications tend to be data-centric, and must meet stringent requirements for security,
administration, and maintenance.
Developing extensive enterprise-level applications adds a level or two of complexity to the Web application
development process. But Visual InterDev, in conjunction with other Microsoft® Visual Studio™ tools, helps
you to create these complex applications.
All the points in this topic that apply to Web applications apply as well to enterprise applications, but here are a
couple of additional points you'll want to keep in mind when developing enterprise applications:
 Plan extensively. Think about scalability and performance in the design phase. If you anticipate a lot of
network traffic, plan to take advantage of Microsoft® Transaction Server technology and ASP
connection pooling. Separate business logic, databases, and user interfaces as much as possible.
®
 Create components when possible. Encapsulating functionality into ActiveX controls and COM
objects allows you to share and maintain code more efficiently. Microsoft® Visual Basic®, Visual
FoxPro® and Visual C++® make it easy to encapsulate your code into components that can be leveraged
from Visual InterDev applications.

4
BUILDING A SOLUTION
A solution allows you to work on several projects at one time efficiently. For example, a solution can have both
a Web and a Microsoft® Visual J++™ project in it. The Web project manages all of the files that make up the
pages of the Web application. For example, you might have several pages that make up the front-end to your
database. Or you can create and deploy some pages to inform your users that the Web application is in
development. For this set of pages, you can create one Web project for publishing some basic Web pages that
announce the Web application and keep visitors updated on when the full Web application will be available.
You can add a second Web project to the solution for developing a prototype of the final Web application. Also,
if you plan to create a database, you can add a database project. Your Web project can also include Web
components created in Visual Basic or Visual C++.
In building a solution, you will probably want to perform the following general activities:
 Make a Web project to create and manage the files in your Web application.
 Add a database connection or create a new database.
 Develop a prototype by adding Web items to your Web project.

MAKING A WEB PROJECT

To minimize the time and effort you spend in creating a Web application, Visual InterDev sets up the basic
components you need and gives you the option to standardize the look and feel from the start.
To set up a Web project, you need to provide the following information.
 Name of the master Web server
 Name for the local project and physical directories
 Name for the Web application and virtual root
 Mode for updating the master server: master or local
 Theme (optional)
 Layout (optional)
After you have created a Web project, you can add items that implement the features you identified during the
planning phase.
Working Independently
Your Web project actually supports two sets of Web application files. One resides on the master Web server
and one locally in your project directory. The local version allows you to develop and test independently from
the master version depending on the mode of the project.
Your project can operate in one of two modes: local mode or master mode. In local mode, you can save and test
the changes you make to files in the local Web application without changing the master copy. You work in
isolation from changes made by others to the master Web application. Your changes are not saved to the master
Web server until you release the local copy.
When you work in local mode, the changes you make are applied to a local disk-based Web application called
the local Web application. The local Web application mirrors the structure of the master Web application as it
was
At times your local Web application can contain a different set of files than the master Web application. For
example, if you add a file while in local mode, the file is immediately added to your local Web application but
not to the master. If team members updates the master from their local Web application, your Web project will

5
not show those changes. To resolve these issues, update the master Web application, refresh your project, or
synchronize your local Web application with the master Web application.
Working Offline
If you do not need to access the server or if the server is down, you can work offline. When working offline,
commands that require the server are not available. For example, you can make changes to files in your local
directory, but you can’t release the changes and update the master Web application.
In addition, the functionality available for testing your project offline depends on the system components on
your developer workstation. If you have a Web server on your developer workstation, the project sets up a Web
application root that allows you to test against a Web server and server extensions on your workstation. If you
do not have a Web server and the appropriate extensions, the file is loaded directly from the local Web
directory.
Working Outside of a Project
If you add, create, or delete Web application files outside of Visual InterDev and the Project Explorer, you need
to refresh the project when you return to the Project Explorer. For example, if you add or delete a file using the
Windows® Explorer, the project would not show that change to the local directory and the local files until you
refresh the project.

ADDING A DATABASE
If your Web application plans include database access, you can integrate existing databases or modify a
database specifically for your Web application. In the Web project, just add a connection to the database and
you can use information from the database in your Web application files. This connection also displays a Data
View window you can use to view the objects in the database and adds a data environment to your project.
You can also modify the database objects from your Web project using the Microsoft® Visual Database Tools.
After you have a database connection, you can continue working from within the Web project to develop a
prototype.

DEVELOPING A PROTOTYPE
After you have created your Web project and data connection, you can quickly develop a prototype of your
Web application. Some developers wait to add the look and feel elements of their Web application until after
they have finished implementing the core features and functionality. You may have already added those
elements to your Web application when you created the project and chose a theme and layout.
Create and Organize a Set of Pages
Using your content plans, you can outline the HTML and ASP pages for your Web application by creating a site
diagram. A https://msdn.microsoft.com/en-us/library/aa233127(v=vs.60).aspx provides a graphical view of the
pages in a Web project. The pages automatically incorporate the theme and layout defaults you selected when
you set up your Web project.
After you have setup the initial prototype pages and Web application organization, you can modify them to
meet your Web application’s requirements.
By establishing hierarchical relationships between the pages in a site diagram, you can easily design the
navigation links for your Web pages. If you want to modify the look and feel, you can do that quickly by
changing the theme or layout.

6
Author Text to Introduce the Web Application
Web application pages typically have some information that rarely changes. HTML is used to implement this
text.
Your Web application should probably include at least one page with information that introduces the purpose of
the Web application and informs the Web visitor how to use the Web application or a specific page. Typically
this information is provided on the start page for the Web application and provides a common entry point to the
Web application. It can include other design elements such as forms, data, or interactive objects.
If you are designing for the Internet, this page should be browser-independent and inform the user of any
special software or browser requirements your Web application needs to run properly.
Implement Data and Script
After you have created your initial set of pages, you can open the pages in the editor and add the text, images,
and script that fulfill your Web application’s purpose. One of the main considerations in determining how you
implement content is whether you want the processing performed on the client or the server. This answer
depends on the audience, their browser capabilities, and the resources on your deployment system. For a
summary of Web items to consider using, see the following section, Creating and Testing Web Items.
Whether you decide to use client or server scripting, Visual InterDev offers a Web page editor and a data
environment that allows you to implement your functionality quickly. For example, you can use the data
environment to create a recordset object for use on multiple pages. The editor also offers several data-bound
design-time controls you can easily add to your pages that display those records. F
Control the Web Application
To control your pages as a Web application, you can use server processing with Active Server Pages and its
special file, the Global.asa file. In the Global.asa file, you can script session- and Web application-level events
and variables that are available to all of the pages in the Web application that use server script.

CREATING AND TESTING WEB ITEMS

Visual InterDev provides a variety of visual designers and ActiveX® controls you can use to implement your
feature set.

IDENTIFYING ITEMS TO USE

When planning your Web application’s functionality, you might want to consider using a variety of items to
specify the features in your Web application. Since a Web application actually consists of a set of files that
reside on a Web server, you can identify each item by its file type. For example, you can incorporate any of the
following items into your Web application.
To add Consider
Static pages or client script .htm files
Server script .asp files
Data publishing Recordsets
Design tools Design-time controls
Visual design Templates, themes, and layouts, images and multimedia files
Interactive pages ActiveX controls

7
Integrated Web solutions Output files from other projects such as applets
Downloadable documents Document files, spreadsheets

CREATING SIMPLE INFORMATION PAGES

You might want to create a set of straight HTML pages that announce that your new Web application is in
development, when to expect it to be deployed, and what your user can expect to gain from it. A few static
information pages can hold the place of your Web application and create interest in using it. You can deploy
this set of pages to establish a Web presence that can be as useful on an intranet as it is on the Internet.
After deploying your introductory version of these pages, they can easily evolve into the start pages for your
dynamic Web application. After your Web application is complete, all you need to do is deploy the full set of
files and replace the previous versions with your improved pages and the additional pages that make up the Web
application. https://msdn.microsoft.com/en-us/library/aa233127(v=vs.60).aspx to the original introduction pages
will continue to work to bring the user directly into your Web application.
You can use a site diagram if you want to create several pages or simply create a single HTML page that
contains the announcement. You might want to add images or other effects to make the page more visually
appealing.

PUBLISHING DATA DYNAMICALLY

A Web application can serve as the front-end to any ODBC data source. You can design pages that display data
or allow users to update, add, or delete records. For displaying data, you can use data-bound design-time
controls. You can choose whether the data is processed on the server and sent as text to the client or you can
implement some dynamic data capabilities on the client.

SCRIPTING INTERACTIVE PAGES

Typically a Web application includes pages with forms or other items that require or respond to user actions.
Forms are made up of intrinsic elements of HTML. You can use design-time controls to quickly tailor elements
on a form to fulfill your Web application’s requirements. With dynamic HTML, you can create dynamic effects
on the pages and script them to respond to events or the passage of time.
Although many of the Visual InterDev wizards and tools generate the basic code and script for many elements
of your Web application, you probably want to use certain criteria to control the results on your Web page. For
example, you might want certain pages that appear for a user who completed a form and a prompt to finish the
form for users who did not fill out the form.

ADDING RUN-TIME SECURITY

You can protect your resources from unauthorized use by implementing security. In addition to the security you
set through your server, you can also add password pages and user verification script through your Web
application. For example, you can add pages that integrate an HTML form that collects user identification and
password with server script that compares the information to a database.
DESIGNING VISUAL IMPACT AND SITE NAVIGATION
The visual design and site navigation determines your Web visitor’s initial impression of your Web application.
The way you apply colors, images, and sounds can make your Web application intuitive and easy to use.

8
Carefully designing your site navigation makes it easy for the user to move from page to page through your
Web application. Using a site diagram, you can graphically lay out your pages and specify the navigation at the
same time.
Before creating your Web application, plan the general look and feel of your site. Or, choose a Visual InterDev
theme and layout to give your Web application consistent visual impact while you create the pages in your Web
application. When you create a project, you can specify one of the themes provided by Visual InterDev.
If you have a theme design in mind, you can create your own themes, templates, and layouts to quickly add
consistency to the Web application.
Themes and Layout Files
Visual InterDev offers you several themes and layout files you can use to give your Web application a
consistent look and feel.
Site Navigation
Site Designer provides a graphical method of designing your site navigation. Create site diagrams to define the
hierarchical relationships between pages. When you specify the relationships, the site diagram automatically
specifies the links between the pages and adds them to your Web pages.
Dynamic HTML and ActiveX Controls
You can use Dynamic HTML to lay out text, images, and multimedia items on HTML pages. Dynamic HTML
provides you with a rich set of controls for scripting multimedia pages. These controls give you a set of objects
and parameters you can change dynamically to change visual and sound effects on your page.

TESTING LINKS AND DEBUGGING SCRIPT

You can test the entire Web application as you progress. The two main areas to test are links and script.
Find Broken Links and Pages Without Links
In creating a Web application, one of the primary concerns is the verification and testing of links between the
Web pages. Visual InterDev provides tools for you to verify and test the links within your Web application.
Check links on a single page Using Link View, you can verify that each link on a page points to a page that
exists. Through the link diagram, you can see a graphic representation of the links to and from your Web page.
Link View only verifies that a link points to a page that is an existing Web page. It does not determine whether
the link points to the correct page.
Check links in the entire Web application If you want to find out all of the broken links and files without
links in the entire Web application, you can generate a list using the Broken Link Report.
Verify link destinations To test that each link goes to the correct page, you need to open the page in a browser
and click each link. To test links while your project is in local mode or offline, you need to make sure that all
the files you want to view are in the local directory. If the target file is not in the local directory, the browser
can’t resolve the link.
Automatically repair links Visual InterDev also offers a link repair feature that automatically fixes links when
you make changes to the files. For example, if you rename a file, all links to that file must be updated with the
new file name. Even simply renaming or moving a single file may force many other files in the project to be
changed.
Link repair modifies the necessary files on your behalf, updating the links to point to the correct file. The link
changes are first applied to the master Web application and then to the local Web application and all affected

9
files are updated. If an affected file is open in an external editor or if another developer has the file open, the
links in those files must be fixed manually.
Debugging Script
You can debug script much as you would in a traditional Web application. When you preview your pages, you
can find syntax errors, run-time errors, and logic errors.
Using the editor and its debugger, you can control the execution of your script and monitor values of variables
and properties to identify the cause for errors you encounter.

DEPLOYING AND MAINTAINING A WEB APPLICATION

After you have tested the Web application and are satisfied with its performance, you can deploy it to the Web
server you make available to your users. Since a Web application is actually a set of files, you need to copy the
virtual root and its file set to the production Web server. If your pages use the virtual root as the basis for their
links, all links should still work. If your project includes a dependent project, you need to make sure the server
component outputs are properly registered on the server.
The advantage of a Web application is easy maintenance. To upgrade a Web application you don’t need to
recompile and redistribute an entirely new executable file. All you need to do is add new files and replace
previous versions.
During an upgrade, your users are not interrupted while they are working because their browser is using the
original copy of the file it got from the Web server. When the file is replaced with a newer version, the user sees
the new version only after refreshing the page not while viewing it. The upgrade to a new file set is seamless.

10
 WEB APPLICATION DEVELOPMENT PROCESS
Web application development is the process and practice of developing web applications. Just as with a
traditional desktop application, web applications have varying levels of risk. A personal home page is much less
risky than, for example, a stock trading web site. For some projects security, software bugs, etc. are major
issues. If time to market, or technical complexity is a concern, documentation, test planning, change control,
requirements analysis, architectural description and formal design and construction practices can mitigate risk.
In practice, two main categories of coding are used to create web applications:
1. CLIENT SIDE CODING – a type of code that is executed or interpreted by browsers. Client side coding is
viewable by any visitor to a site. Most common technologies here are:
 HTML (Hyper text markup language)
 CSS (Cascading style sheets)
 JavaScript
 Ajax (Asynchronous javascript and XML)
 jQuery (JavaScript framework library)
 MooTools (JavaScript framework library)
 Dojo Toolkit (JavaScript framework library)

2. SERVER SIDE CODING – a type of code that is executed or interpreted by the web server. Server side
coding is not viewable or accessible by any visitor or general public. Technologies are:
 PHP (Linux / Unix based open source, usually combined with MySQL database)
 Zend Framework (PHP’s object oriented framework)
 ASP (Microsoft web server scripting language)
 ASP.NET (Microsoft’s web application development framework)
 ColdFusion (Adobe’s web application framework)
 Ruby on Rails (Ruby programming’s web application framework)
 Perl (general purpose programming language)
 Python (general purpose high-level programming language)

Web Application Development Process

Through web application development process a practical procedure and approach in development is organised.
The list of procedures provides a good look of web application development:
1. Roadmap: Defining web application, goals and direction
2. Defining audience scope and security issues
3. Functional specifications or feature summary
4. Team collaboration and project management document
5. Technology selection, technical specifications, development methodology, etc.
6. Third party vendors analysis and selection
7. Application guide, design layout, interface
8. Database structure and web application development
9. Testing: quality assurance, browser compatibility, security, performance.

11
The Web is a different breed. Many programmers have little tolerance for the paths it has taken. But it’s not that
the web is perfect, it certainly has glitches. It’s not that success means something is better. Many terrible things
have found nig audiences. And of course, the web does not solve every programming need. So why is the web
better? Web applications made it possible to address scalability problem. It allows both human and technical
distribution of responsibilities. The web came at great timing. It had a few years at the beginning to settle and
develop. Next came a few years of insane growth, where developers could make mistakes. And then a quieter
period for those fixes to set in. Even then, web maintained huge scale, and web projects continued growing.
Web is a great way to build distributed applications. It showed up at a time when a lot of people wanted to do
that. The front end, the back end, and the connections between them are built with a unique set of features and
constraints. And it makes much easier to build great applications.

Unlike applications for platforms like iOS and Android, the first-tier languages of web application development
are HTML, CSS, and JavaScript. These languages are supported by a worldwide web of developer resources.
This web pack is available on modern mobile and desktop hardware. And it enables you to maximize code reuse
and potentially reach a massive audience on different platforms and devices. One can explore the aspects of web
app creation, the strategies for designing a flexible, functional app, and coding an application to completion.
HTML is used to create the content structure for the web application. CSS provides the visual presentation, and
lets you control the basic layout of content. CSS can do more than just format content though. One can use CSS
to animate elements, create gradients to avoid having to use images. Also, to create media queries for the
appearance of content on various devices. JavaScript provides the dynamism and user interaction for the web
app. JavaScript lets you listen for and respond to user interactions. As well as load content dynamically, and get
access to device-specific features. Important to note that support for individual features differs from browser to
browser.

Before you go into web application development, make sure you have the tools required. A solid text editor is
the most crucial tool. There are several free text editors available, including: jEdit, Emacs, vim, Komodo Edit,
Sublime Text 2, Notepad++, TextWrangler. Testing of the application is done within the browser. You need to
input some useful developer tools for the browser. These tools should help with inspection, styling, visual
elements of the app. It is strongly suggested to find a combination of tools that work for your special demands.
There are many considerations to ponder before going into web application development. Especially those
concerning design. Knowing the types of devices your application should work with is the biggest importance.
Target devices and their capabilities tell what features you can count on. Many JavaScript frameworks provide
multiple device themes for easy implementation. Regardless of the specific devices, there are few basic
principles which should be followed. Avoid pixel-based widths when designing for multiple devices. Use vector
graphics for dimensions to be adjusted between devices. Do not assume features on any device, use feature
detection. The more flexible the app design, the more portable it will be. The design of the application should be
typical, with two panes. The first pane provides a search box for entering user location. The second pane shows
a list of tweets, for example. Each pane should use a standard heading.

Web application development with no experience

The goal and a good idea. Actually, an idea you are passionate about. If you are excited about the idea,
spending time learning, researching, and working on it is always a lot of fun.

12
Set apart free time. It isn’t a complicated science. If you don’t set apart time to work on your project, you are
never going to get anything done. Schedule time into your week where you know you can dedicate some time to
your project. If more free time comes up, great. Use it to make more progress. Just make sure to set minimum
amount of time for the project every week.
Identify the tools. How to go into web application development from scratch with no experience? You
definitely need to choose the tools for the job. Web development framework comes in plenty of choices. Be it
Ruby on Rails or CSS, find a tutorial, and start where you like.
Start making mistakes. Web application development aspect is going to be the most important part. As you
start building some sample applications, you make mistakes. You google it, you learn in the process. Making
mistakes and finding solutions to fix it is a big part of the learning process.
Read books. After basics, it is time to find proper books and get serious about learning. Though, these books
are always going to go out of date in time. Thematic instructionary books bring you a fuller understanding of
the framework as a whole.
Eventually, after days and weeks, you finally have something to launch. And regardless of how long it takes, if
you’ve done it methodically, you will be ready to release something into the world.

13
 WEB APPLICATION TECHNOLOGIES
Technologies for web application development are plenty:
Ajax, ASP, ASP.net, ActionScript, Apache, Flex, CSS, ColdFusion, CGI, Django, Drupal, HTML5, Java,
JavaScript etc. It also includes frameworks as: AngularJS, Ember.js, React, jQuery, Nginx, Node.js, Perl, PHP,
Play Framework, Python, Ruby (including Ruby on Rails), WordPress, Wt, Xojo.
Web applications are dynamic web sites combined with server side programming which provide functionalities
such as interacting with users, connecting to back-end databases, generating results to browsers. Examples of
web applications are online banking, social networking, online reservations, eCommerce / shopping cart
applications, interactive games, online training, online polls, blogs, forums, content management systems, and
more.
Technologies for web application includes:
1. BROWSERS
Browsers are the interpreters of the web. They request information and then when they receive it, they show us
on the page in a format we can see and understand.
 Google Chrome - Currently, the most popular browser brought to you by Google
 Safari - Apple’s web browser
 Firefox - Open-source browser supported by the Mozilla Foundation
 Internet Explorer - Microsoft’s browser. You will most often here web developers complain about this
one.
2. HTML
HTML is a markup language. It provides structure of a website so that web browsers know what to show.
3. CSS
CSS is a Cascading Style Sheet. CSS let’s web designers change colors, fonts, animations, and transitions on
the web. They make the web look good.
 LESS - a CSS pre-compiler to make working with CSS easier and add functionality
 SASS - a CSS pre-compiler to make working with CSS easier and add functionality
4. PROGRAMMING LANGUAGES
Programming languages are ways to communicate to computers and tell them what to do. There are many
different programming languages just like there are many different lingual languages (english, spanish, french,
chinese, etc). One is not better than the other. Developers typically are just proficient at a couple so they
promote those more than others. Below are just some of the languages and links to their homepages
 Javascript - used by all web browsers, Meteor, and lots of other frameworks
 Coffeescript - is a kind of ―dialect‖ of javascript. It is viewed as simpler and easier on your eyes as a
developer but it complies (converts) back into javascript
 Python -used by the Django framework and used in a lot of mathematical calculations
 Ruby - used by the Ruby on Rails framework
 PHP - used by Wordpress
 Go - newer language, built for speed.
 Objective-C - the programming language behind iOS (your iPhone), lead by Apple
 Swift - Apple’s newest programming language
 Java - Used by Android (Google) and a lot of desktop applications.
5. FRAMEWORKS

14
Frameworks are built to make building and working with programming languages easier. Frameworks typically
take all the difficult, repetitive tasks in setting up a new web application and either do them for you or make
them very easy for you to do.
 Meteor - a full-stack (front and back end) javascript framework
 Node.js - a server-side javascript framework
 Ruby on Rails - a full-stack framework built using ruby
 Django - a full-stack framework built using python
 Ionic - a mobile framework
 Phonegap / Cordova - a mobile framework that exposes native api’s of iOS and Android for use when
writing javascript
 Bootstrap - a UI (user interface) framework for building with HTML/CSS/Javascript
 Foundation - a UI framework for building with HTML/CSS/Javascript
 Wordpress - a CMS (content management system) built on PHP. Currently, about 20% of all websites
run on this framework
 Drupal - a CMS framework built using PHP.
 .NET - a full-stack framework built by Microsoft
 Angular.js - a front-end javascript framework.
 Ember.js - a front-end javascript framework.
 Backbone.js - a front-end javascript framework.
6. LIBRARIES
Libraries are groupings of code snippets to enable a large amount of functionality without having to write it all
by yourself. Libraries typically also go through the trouble to make sure the code is efficient and works well
across browsers and devices (not always the case, but typically they do).
 jQuery
 Underscore
7. DATABASES
Databases are where all your data is stored. It’s like a bunch of filing cabinets with folders filled with files.
Databases come mainly in two flavors: SQL and NoSQL. SQL provides more structure which helps with
making sure all the data is correct and validated. NoSQL provides a lot of flexibility for building and
maintaining applications.
 MongoDB - is an open-sourced NoSQL database and is currently the only database supported by
Meteor.
 Redis - is the most popular key-value store. It is lighting fast for retrieving data but doesn’t allow for
much depth in the data storage.
 PostgreSQL - is a popular open-sourced SQL database.
 MySQL - is another popular open-sourced SQL database. MySQL is used in Wordpress websites.
 Oracle - is an enterprise SQL database.
 SQL Server - is an SQL server manager created by Microsoft.
8. CLIENT (OR CLIENT-SIDE)
A client is one user of an application. It’s you and me when we visit http://google.com. Client’s can be desktop
computers, tablets, or mobile devices. There are typically multiple clients interacting with the same application
stored on a server.

15
9. SERVER (OR SERVER-SIDE)
Server is where the application code is typically stored. Requests are made to the server from clients, and the
server will gather the appropriate information and respond to those requests.
10. FRONT-END
The front-end is comprised of HTML, CSS, and Javascript. This is how and where the website is shown to
users.
11. BACK-END
The back-end is comprised of your server and database. It’s the place where functions, methods, and data
manipulation happens that you don’t what the client’s to see.
12. PROTOCOLS
Protocols are standardized instructions for how to pass information back and forth between computers and
devices.
 HTTP - This protocol is how each website gets to your browser. Whenever you type a website like
―http://google.com‖ this protocol requests the website from google’s server and then receives a response
with the HTML, CSS, and javascript of the website.
 DDP - is a new protocol created in connection with Meteor. The DDP protocol uses websockets to
create a consistent connection between the client and the server. This constant connection let’s websites
and data on those websites update in real-time without refreshing your browser.
 REST - is a protocol mainly used for API’s. It has standard methods like GET, POST, and PUT that let
information be exchanged between applications.
13. API
An API is an application programming interface. It is created by the developer of an application to allow other
developers to use some of the applications functionality without sharing code. Developers expose ―end points‖
which are like inputs and outputs of the application. Using an API can control access with API keys. Examples
of good API’s are those created by Facebook, Twitter, and Google for their web services.
14. DATA FORMATS
Data formats are the structure of how data is stored.
 JSON - is quickly becoming the most popular data format
 XML - was the main data format early in the web days and predominantly used by Microsoft systems
 CSV - is data formatted by commas. Excel data is typically formatted this way.
CLIENT-SIDE TECHNOLOGIES
XHTML
XHTML is a markup language designed to structure information for presentation as web pages. Rather
than relying on WYSIWYG programs, we write all our XHTML by hand, ensuring that it is clean, valid
and of the highest standard. This means that pages have fastest download times possible, are viewable
on all browsers, are search engine friendly, and have maximum forward compatibility.
Cascading Style Sheets
Cascading Style Sheets control how web pages are displayed in the browser, and allow the separation of
presentation from structure and content. CSS help ensure that web pages are presented in an accessible
way to all visitors, over a wide range of media.
JavaScript/ECMA Script

16
 JavaScript is a lightweight scripting technology which is used alongside XHTML documents to make
websites more interactive.
SERVER-SIDE TECHNOLOGIES
PHP
PHP is a fast, server-side scripting language that is used to create interactive, dynamic web sites. It is
particularly well-suited to integrating with a range of databases.
CGI/Perl
Perl is a programming language that can handle input and output from a Web Server, usually through the
Common Gateway Interface. It is most commonly used to process information through forms.
XML/XSL
XML is a software and hardware independent markup language designed for describing and transmitting
information. It is set to become the most common tool for all data manipulation and data transmission.
XSL is a language for defining, transforming and formatting XML documents.
MySQL
MySQL is a fast, open-source Relational Database Management System that uses the popular Structured
Query Language (SQL). It is perfect for most websites that need database functionality, and works hand-
in-hand with PHP.
PostgreSQL
PostgreSQL is a more sophisticated open-source Relational Database Management System. It is well-
suited to sites that require robust database functionality, such as e-commerce sites.
Linux/Apache
Linux is a popular open-source operating system, and Apache is the most widely-used web server on the
Internet. Together they provide a fast, extremely reliable, secure platform for web sites.
SSL/Secure Servers
Unlike normal web servers, secure servers ensure that information exchanged between the visitor and
the web site cannot be viewed by any third parties. A secure server is essential when handling
confidential information, such as online credit card transactions or personal medical details. SSL, or
Secure Socket Layer, is one method of exchanging data securely.
MULTIMEDIA
Macromedia Flash
Flash is a product designed to provide web sites with animation, sound, interactivity and database
integration. A free plugin, which also ships with the major web browsers, is needed to see the Flash
parts of a site. Flash can create a truly multimedia web site, but has certain disadvantages, and is
therefore best used sparingly.
We also have experience with a range of other technologies, including ASP, Microsoft Access, SQL Server,
Windows, IIS, SSI and Macromedia Shockwave/Director.
If you require any specialised services that we feel are outside our capabilities, then we will be happy to arrange
and supervise suitably qualified contractors. Please contact us to discuss your specific needs.

17
 WEB DEVELOPMENT TRENDS
According to Infoworld research, there are trends in programming and web application development as well.
That’s what makes programming an exciting trade – change, debate and comebacks.
JAVASCRIPT FRAMEWORKS. In the past, everyone learned to write JavaScript to pop up an alert box.
Now apps are so sophisticated that few people start from scratch. It is simpler to adopt an elaborate framework
and then write a bit of code. Now there are dozens of frameworks ready to handle the events and content for
web applications and pages.
CSS FRAMEWORKS. Earlier, you opened the CSS file and included a new command. Then you saved the
file. Now web pages are sophisticated and it’s impossible to fill with such simple commands. One tweak to a
color and everything goes out of control. Everything is connected. That’s where CSS frameworks have found
solid ground. Encouraging professional stable coding, offering programming constructs. It may not sound like
much news in the programming layer, but it’s a big leap forward.
BIG DATA. No surprise when the words ―big data‖ started appearing, the executives started asking for the
biggest, most powerful big data systems. As if they were purchasing the largest skyscraper. Funny thing, lots of
problems are not big enough to use big data solutions. Most companies are not like Google or tahoo. Most of
companies have data sets that can easily fit in a basic PC. In most algorithms, the data does not need to be read
into memory. There can be instances demanding fast response, but many will do just fine without the
coordination or communication.
GAME FRAMEWORKS vs native game development. Game development used to mean hiring plenty of
developers to do everything from zero. Now, noone can afford that. Most games developers use libraries to
build their systems. They do not write C-code as much as instructions for the libraries. Developers are relieved
in a sense. Because they don’t have to deal with the details. They can focus on the game play, narrative arc,
characters.
SINGLE-PAGE WEB APPLICATIONS. Remember when URLs pointed to web pages filled with static text?
New web apps are front ends to large databases filled with content. It pulls data from the database and pours it
in. There is no need to mark up the data with all the web extras. The data layer is completely separate from the
presentation and formatting layer. This means the rise of mobile computing. A single responsive web page that
work like an application becomes a better solution.
Mobile web apps, not native mobile apps. You could write separate versions for iOS, Android, Windows 8, or
others. Each requires a separate team on different programming language. Or you could just build one HTML
app and put it on a website to run on all the platforms. No need to return to the app store, begging for a bug fix.
Now that the HTML is getting faster, this approach can compete with native apps better.
Android vs iOS. Times change. While iPhone and iPad continue to have dedicated fans, sales numbers favor
Android more and more. Reports say more than 70 percent of phones sold were Androids. The reason is simple
– the price. While iOS devices are still pricy, Android world is producing tablets for as low as one-fifth the
price.
GitHub. Participating in open source projects is becoming more and more important for finding a job. Sharing
the code from a proprietary project is hard, but open source code can go everywhere.
Web interfaces. For example, WordPress comes with a built-in editor that lets you change the code. Microsoft’s
Azure lets you write JavaScript code in its portal. These systems don’t offer the best environments, but the idea
is attractive.

18
Demise of desktop adds. They said they’d be dead. Gone from our docks and into our browsers. The demise of
the desktop apps has long been predicted. In favor of browser-based models. You don’t see a downfall in good
technology for a reason. Tech industry has been ditching the native app in favor of the web app. It turns out they
have some pretty solid reasons. Nothing to download, nothing to install. It’s easier to convince people to use
your app if they can get started right away. Downloading and installing feels like more of a commitment than
having a play around. One big step in the onboarding process has been removed. No more updates. Since
automatic updates were introduced this one isn’t the huge benefit. Yet updating your application on the web
does ensure that nobody is using an outdated version. It eliminates compatibility issues.

RULES AROUND WEB ARCHITECTING SYSTEMS

Over the years, there are a few basic rules around architecting systems.
1. SCALABILITY
Ensure that your architecture can be scaled horizontally, across multiple servers and across multiple regions.
That means that once your traffic goes up, you should be able to add and remove new servers.
2. AVAILABILITY
The architecture should support a high availability environment. What happens if one, two or three servers fail?
What happens if a whole region fails?
3. SECURITY
Your architecture should expose only the minimal amount of code possible. Most of the back-end pieces should
be hidden away. In addition to that, security of each system should be multi-layered. What happens if you hack
one layer of the system? Do you get access to everything or just a small piece of the system?
4. EXTENSIBILITY
You should be able to swap out modules, change layers, and add pieces to your application without having to
worry about the underlying data contracts you have in place. Extensibility should be easy and fun - you
shouldn't have to worry about where you start or what you might break!
5. SEPARATION OF RESPONSIBILITY
Your system should be modular enough that each piece of code has a set of responsibilities and not more. Your
back end should not create front end code nor should your front end code include business logic.
So what does a good architecture look like?
The basics of a good architecture is to layer the application into multiple autarkic and autonomous applications
that can be replaced individually and allow us to keep the application running while we are working on a
specific layer. The communication between each layer should be a RESTful API call with JSON content. For
the sake of a good example, we are going to discuss creating a cloud based music management application. We
should be storing music in the cloud and be able to find it, add more music and extend our library to whatever
size we need.

19