Software Programming

Kunuk Nykjaer

Web application development steps of creating working software

leave a comment »


The steps represent the process of creating features for a web application.

Web application development steps for working software


 

Client-side is the browser.
Client-side only means it is not dependent on a back-end server.

Step 1 – prototyping

This is the step where you make a proof of concept of ideas and make demonstration for the customer to get early feedback. The content is hard-coded inside the presentation. When you search for html templates on the internet they will almost always be based on step 1.
e.g.


 

Step 2 – dynamic content

This is the step where you separate the content from presentation. You have verified that the presentation is accepted. You create a client-side template layout to enable dynamic presentation rendering. If you don’t want a single page application you can sometimes skip this step and go for a server-side template layout. The content is usually json-data where a client-side template system is used to render the presentation. This steps also enables more flexible adjustment of the content and enables easier testing of the presentation result by experimenting with the content without needing a backend server-system.


 

Step 3 – backend power

This is the step where you implement the communication between the client and the server. The content resides at the server-side. The server delivers the content to the client. If you don’t use a client-side template layout you create a server-side template layout. The data is usually to be persisted securely somewhere and that is almost always at the server-side. That’s why you will need this step.

Examples

The visual result of the code samples below can be seen here.


 

Step 1

Presentation and content are mixed

html

<section class='spots-section clearfix'>
    <div class='spot apple'></div>
    <div class='spot orange'></div>
    <div class='spot banana'></div>
    <div class='spot tomato'></div>
    <div class='spot silver'></div>
</section>


 

Step 2

Presentation and content are separated (Knockoutjs code sample).

html

<section class='spots-section clearfix' data-bind='foreach: spots'>
    <div class='spot' data-bind="css: type"></div>
</section>
<script src='//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js'>
</script>

javascript

var app =
    (function () {
        var spots = ko.observableArray([
            { type: ko.observable('apple') },
            { type: ko.observable('orange') },
            { type: ko.observable('banana') },
            { type: ko.observable('tomato') },
            { type: ko.observable('silver') }
        ]);
        var data = {
            spots: spots
        };
        ko.applyBindings(data);
        return data;
    })();

I have the flexibility to dynamically edit or add/delete content at run-time.

e.g. to add an apple spot i can use this code.
app.spots.push({type: 'apple'})

e.g. to change the first item to a tomato i can use this code.
app.spots()[0].type('tomato')


 

Step 3

For this step we can keep the client-side template and communicate using ajax or we can create a server-side template instead.

Here’s a simple similar server-side version of the client-side template in Asp.net MVC Razor and PHP Twig.

Razor

@model List<string>
		   	 
<section class='spots-section clearfix'>
	@foreach (var type in Model)
	{
		<div class='spot @type'></div>
	}
</section>

PHP Twig

<section class='spots-section clearfix'>
{% for spot in spots %}
    <div class='spot {{ spot.type}}'></div>
{% endfor %}
</section>
Advertisements

Written by kunuk Nykjaer

February 15, 2015 at 3:20 am

Posted in Development

Tagged with

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: