CONGINEER: Consulting, Co-Founding, and Engineering Services

Your idea may need a web app which is

Compelling

What keeps users on?

Focused, comprehensive, well-structured, self-guiding, brief, useful, easy-to-navigate content of your web site.

Gamification of the content may be difficult but rewarding because it increases the user engagement.

Neuro-linguistic programming (NLP) appears to be even a more advanced move in this direction.

Why this is important?

If your web app is interesting enough and not too weird for the users to keep them involved, it may succeed because they will spend more time on it, and more users will come back again and again.

Notice the importance of having a mobile-aware web app. More and more people are searching the web using their phone or tab. This trend is reflected by Google that now gives preference to sites with a mobile version.

A mobile-friendly web app improves user satisfaction and experience for those browsing your site on mobile devices.

What to avoid:

oversimplified or trivial content
too much gamification
amorphous or too extensive text
unrelated or bad-quality images
focus on amount instead of quality

Attractive

Website design

Beautiful typography, smart color palette, well-distributed whitespace, and proper selection of UI elements are key factors in producing a great design. There are dedicated training resources in illustration and video visual effects, such as TrainSimple and Digital-Tutors, as well as more focused on web page UI design, such as Tuts+ .

Contrary to popular belief, the most advanced designs are not always the best. There are more factors involved: learnability, practicality, and the user’s desire to stick with what they know. Throwing something revolutionary but unfamiliar at users may confuse them and scare them off. However, in a competitive market you need to set yourself ahead, and there is always room for improvement in existing systems.

How to achieve the perfect balance? The answer is to keep up with the UI elements familiarity that links the advancement with the acceptability. If you can present your innovative ideas in a familiar way, the users will be more likely to accept them – even if the ideas are, in fact, unfamiliar. UI patterns and common signifiers are the best way to stay connected with the acceptable while entering new grounds. Retain a few familiar things on your site, and your users will tolerate your sense of innovation.

MAYA principle

The MAYA (Most Advanced Yet Acceptable) principle implies that too advanced is anything that the user is unwilling to accept. This could be something that looks too different, features controls that are too different, or simply doesn’t feel right. How to apply the MAYA principle to web design?

Create backup options: If you make the advanced aspect of your design an option, users are free to explore and grow accustomed to it at their own pace. They can still do things the old-fashioned way, but may experiment and see the advantage of the new element.
Gradually introduce change: Redesign bits and pieces at a time, as opposed to releasing a whole new site all at once.
Rely on familiar visuals: they help anchor users. This concept was taken to the extreme during the skeuomorphic movement in early 2010s, but we see it maturing through Flat Design 2.0, which now embraces just enough realism to improve usability.

Familiar patterns and signifiers help you bypass one of the worst drawbacks of advanced design: the learning curve, for instance forcing the user to learn a new set of controls. The golden rule of web design says: don’t make the user think. The more you burden your users with cognitive load – anything that requires effort to remember, figure out, or otherwise think about – the less they will enjoy the experience on your site.

Typical pitfalls

Concept-less or too unconventional design
Disparate color, layout and navigation
Addiction to downloaded (pre-designed) add-ons
Ambitions (e.g. multimedia) and unrealistic goals
Lack of professional networking ( reinventing the wheel).

Good UI and UX designers push boundaries and challenge conventions. But there is a difference between bending the lines of acceptability and breaking them outright.

Being new and (technologically) innovative is an admirable and effective business strategy, but only when done correctly. Those last two letters of MAYA are the most important: you want to make your designs as advanced as possible, but only if you follow the steps to make them acceptable as well.

Cost-effective

Develop, operate, sell

Businesses move to the web - this brings them closer to customers. Those who can innovate software quickly and cost-effectively will have additional competitive advantage.

However, web application development requires practical knowledge in many areas such as: UX, UI, responsive and/or adaptive design, back-end, databases, security, integration, and so on. Most businesses cannot afford a team of developers with all those skills.

The amount and level of work required to develop a usual website on top of a CMS or a website builder is minor compared with that needed for creating a custom-coded web app with advanced functionality and agile extensibility. For this reason, there is a huge cost gap between CMS-based and custom-coded solutions.

No middle-cost solution

Business owners are often confused by wide differences in cost estimates provided by web development agencies, ranging from ca. $4'000 to over $100'000 for a mid-sized custom website. Even for exactly the same project specification, offers from various companies may differ up to factor of 10. Although there is no universally accepted website costs breakdown and pricing, you can get an idea about that in the blogs here, here and here.

Basic ($2'000-$5'000) or proper ($7'500-$30'000) web sites are built upon website builders or CMS. The typical cost breakdown for an average proper web app for a small/medium size business (excluding the content) looks like this:

domain name - $10 to $90 per year
hosting - $10 to $100 per year
planning - $0 to $600
UX (sitemap, wireframes) - $0 to $1'200
visual design - $1'200 to $2'400
programming - $3'000 to $4'800 (responsive - 30% up)
support with content placement - $240 to $600
client training / documentation - $240 to $600
testing and launch - $960 to $1'200
continued website maintenance - $500+ per year
proactive marketing / SEO - $750+ per month.

The next level of complexity and costs is represented by custom-coded solutions ($15'000-$100'000+, with $2'500-$10'000+ just for planning stage). Development of a custom web app that should implement an amazing idea can be paid to the large extent with equity shares. In rare cases, the business idea can be so promising that a professional web developer will be ready to work no cash at 70-90% for her/his future equity share as IT co-founder.

How to reduce costs?

How can you create a cost-effective web app that drive your business without making it a money pit? The Cup of Joe Blog gives the following 7 tips.

Always create clear specifications - going into development project just with a vague idea is the biggest money-waster because the goal is constantly moving or is not clear at all.
Get something out, fast - each web app is built to solve a problem and the 80/20 rule is in effect, i.e. only 20% of the features solve 80% of the problem. Figure out the minimum viable product (MVP) and give it out to users, their feedback will tell you what features are still needed.
Give your developers the tools they need - otherwise the productivity loss with inefficient tools will far outweigh the cost savings.
Look long term - not all tools are a wise choice, some lock you into a vendor, others limit you to a specific database or platform, or otherwise limit your future options. Avoid such tools. Is the technology to serve you, or you to serve the technology?
Modularize your code into templates and frameworks - it is much cheaper to re-design your web app if it has been built upon a framework and using templates than program everything from scratch.
Integrate before building from scratch - if you need a specific feature of your web app, there is a high chance that it already exists. Attach it to save money in a long run.
Find someone else to pay for it - sell the concept to prospective customers first, or get the low cost of development in exchange for equity.

A word of caution! Offers at the lowest price end (e.g. $5'000 for a proper web site) should be avoided because sometimes they come from companies that did not pay attention to your needs and just throw a number at a wall. If this is the case, it will be hard to expect the appropriate quality and maintainability of the result, and what part of it you will have to (re)do yourself.

Responsive

layout and content viewing

Responsive Web Design (RWD) is a special set of CSS3 coding techniques to create fluid layouts and fetch the appropriate content from back-end into the current browser window viewport.

RWD is easy to recognize when you resize your browser window, and all website elements respond instantly by hiding or popping out, changing their width and height, position, font size, color, file size of the silently fetched images, suggested video playback resolutions (480, 720, 1080, etc.), all to fit well with new viewport geometry.

RWD instant responsiveness satisfies the demand for the client-side CSS3 code to cover all device sizes and screen resolutions that the website can possibly be viewed from, i.e. standard and hi-resolution screens of smart watches, phones, tablets, laptops, desktops, TV sets, and announced future device types.

Client-side detection

RWD code is a multi-layout client-side code for all possible devices. When loaded to the user's browser, it instructs it to display the suitable layout and fetch from back-end the media content of appropriate size (tiny, small, medium, large and hi-resolution versions).

In contrast to old-school fixed-pixel-width layouts, fluid layouts utilize relative length units like %, em, rem, vw, vh, vmin and vmax, and, thus, can efficiently fill the available area of the browser window to fit any screen or device size.

Skilled front-end engineers can code explicit CSS3 instructions to fetch media content on demand and of specified size. The images will be loaded only if the user scrolls or in other way navigates to a specific website location. High-resolution images will be fetched to browsers on large-screen devices, and low-resolution ones to phones or small-resized browser windows.

RWD limitations:

advanced CSS3 skills required
may lead to high code complexity
unlike for images, the whole text content is always downloaded and cannot be fetched in parts on demand
many relevant user device capabilities cannot be detected in browser with CSS3 code only
difficult to handle fixed-size content from 3rd party services, e.g. banner advertisements.

Adaptive

delivery of layout and content

Adaptive Web Design (AWD) is a special set of collaborative coding techniques between front-end in JavaScript and back-end in a script language of choice. The ultimate goal of AWD is to detect physical screen size and special capabilities of the client device, and to deliver the appropriate layout and content to the user's browser.

AWD is easy to recognize when you resize your browser window and the website elements adapt sporadically at certain window widths or heights. After passing such a breakpoint, you suddenly will see a new layout and content delivered by the application back-end server.

AWD sporadic adaptiveness covers the demand for the back-end to deliver pre-coded layouts and selected content according to detected user's device capabilities. In the simplest case, there are pre-coded layouts for touch-enabled devices like phones or tablets, and non-touch devices such as desktops or TV screens.

Server-side decisions

Firstly, AWD back-end scripts perform the standard browser detection, i.e. analyze the user agent string that every web browser sends as a part of its usual network operation. Secondly, they can perform some kind of advanced server-side sniffing. And finally, they analyze the front-end client-side sniffing data.

Front-end JavaScript code performs a lot of asking and capability testing within the user's browser and sends that information to the back-end, i.e. remote server on the Internet.

The gathered information from user agent string and the detected device capabilities needs to be analyzed and/or compared to the database of supported devices. Although to maintain such database is an extra effort, this kind of analysis allows for very specific content delivery and unprecedentedly targeted end-user experience.

AWD limitations:

advanced front-end and back-end scripting skills required for development
maintenance of multiple layouts and content may become a time and budget overkill
addressing SEO and site analytics multiple times on website templates for every device
none of the device detection techniques are fully reliable
maintenance of the own device database vs. costly external detection services

Lightweight

Slim and performant

Writing efficient code leads to a slim web app that sends the minimum amount of information over the Internet between the front-end and the back-end.

From the viewpoint of a single client, a slim web app responds to user's actions in shortest possible time, as it sends less code incrementally.

This increases overall performance, throughput and scalability of a web application.

Good reasons for a slim code base:

less traffic costs less money
less waiting time for the user
less errors to debug
less code to maintain
less code dependencies to check

Common pitfalls

In case of CMS-based web app, there is little to none control over the code base. For the desired app functionality, the CMS plug-in ecosystems usually offer multiple choices for assembling an optimal set of modules. Performance optimization techniques apply to various extent, depending on the choice of the deployment stack (SaaS, PaaS, IaaS).

For a custom-coded solution, the front-end, the back-end and the architectural blueprinting considerations apply.

In terms of code base simplicity and maintainability, different approaches (RWD, AWD) for the front-end development pull in opposite directions: AWD consisting of multiple slim codes that are hard to maintain, and RWD with a single complex code that has inevitably a larger footprint. For a skilled development team, this contradiction is resolved by following the RESS (responsive web design with server-side components) paradigm, i.e. by combining the very best from both RWD and AWD worlds.

Size and performance of the back-end code heavily depend on past experiences and coding abilities of the engineering team. The past experience is not necessarily relevant for the current project, but will dictate the choice of the development stack, i.e. programming languages, frameworks and tools. The upcoming web entrepreneur should be aware of this circumstance and pay close attention to the choice and quantity of used programming languages, the usage of 3 ^rd party software and/or code snippets, and the modularity of in-house written code.

Regardless of how slim and performant the initial code has been, without proper refactoring and architectural blueprinting, the forthcoming addition of functionality will degrade the quality. While refactoring is something that every coder is willing to do infinitely (unless you stop paying for it), the proper blueprinting is more than often postponed or abandoned. However, both parts of blueprinting, namely the code documentation and the use of appropriate modeling languages, are of major importance for the code maintainability. This can and should be effectively organized with help of automated self-documenting and dedicated modeling tools.

Fast

Optimized for speed

Performance is the amount of useful work accomplished by a system, network, or process compared to either actual time and resources used or to general preset standards such as acceptable response time, throughput, availability, and cost. Performance varies depending on the workload when resources are fixed.

Modifying a system with given resources to accomplish the useful work in less time is called performance optimization. Redesigning a system to accomplish the useful work within acceptable time with fewer resources is synonymous to scalability optimization.

Performance of a web app under a given workload is measured in terms of:

responsiveness, i.e. TTFB (in milliseconds);
throughput (per second in data packets or bits);
resource utilization (processors as percentage or in cores, memory in bytes).

Responsiveness is measured from the point-of-view of a single client, and therefore is a prime candidate for defining an acceptable threshold for performance. In contrast, throughput and resource utilization are measured in terms of the system as a whole, including all its nodes and (actual or - for testing purposes - simulated) users.

Acceptable thresholds can be defined before or after various performance tests, such as:

Smoke test - an initial performance test used to see if the app can perform operations under the normal load.
Load test - measures how the application performance varies as the load increases, and determines the level of workload that the app can sustain while still offering acceptable performance.
Stress test - measures the app behavior when pushed beyond normal or peak load conditions, and determines what kind of failure the system will undergo when it is pushed beyond the levels it can support.
Capacity test - a load test variant used to determine a server's failure point, providing information on the total capacity of the current system architecture.
Endurance test - a kind of load test used for determining how the app performs over an extended time period (days) with loads anticipated during production operations.

Why to optimize?

The primary reason is because users may lose their patience if your web app response time exceeds the tolerable wait time (TWT).

Research on the effects of page download time supports the intuitive assumption about the high sensitivity of conversion earnings to the variation of responsiveness. Sales roughly decrease by 1% for each additional 100ms of web app response time.

The next key aspect is that more potential users will actually find your website among search results. A faster web app will automatically generate an increase in good traffic, i.e. website visits resulting from high organic search rankings. This is because Google measures performance of websites when determining the ranking of search results. Hence, an optimized responsiveness may save a lot of money if hiring a SEO agency like WebpageFX proves to be unnecessary.

Not to forget are the savings of costs upon less resources in operation and less consumption of ISP bandwidth with bad traffic, e.g. with sending unnecessary code, server requests, and not optimized images to users.

Finally, web entrepreneurs have enough time to learn, organize and prepare, keeping in mind that performance testing is intrinsically an afterthought of the development process. Hence, performance optimization should proceed after the development and right before the deployment stage.

Way to(o) fast...

Web performance optimization (WPO) techniques are all about increasing the speed at which web pages are downloaded and displayed in the user's web browser.

The main factors affecting your web app responsiveness are the number of HTTP request-responses, and the time spent for downloading page assets into the user's browser. This time consists to 10-20% of the waiting time for the initial HTML; the remaining 80-90% are spent on page assets like CSS, JavaScript, and images. Hence, the WPO targets primarily not the programming paradigm, coding principles or rendering time, but rather the way how to organize and serve the code and media assets to users.

Front-end WPO techniques:

Concatenate the client-side data of the same kind (multiple UI-images into a sprite sheet, multiple CSS and JavaScript into a few files) to reduce the number of HTTP requests to the back-end.
Minify the client-side code (HTML, CSS, and JavaScript) to transfer less data.
Utilize multiple domains to gain parallelism in downloads for static resources via the browser HTTP persistent connections.

Back-end WPO techniques:

Compress the client-side data in HTTP responses to send less data in total.
Optimize images by finding a tradeoff between size, quality, metadata, and method of delivery.
Modify data expirations to override browser cache defaults in order to send data as rarely as possible.
Cache frequently requested data, reuse fresh data, and deliver it promptly.
Balance the load coming to your back-end to put fewer loads on your application and database servers.

Miscellaneous WPO techniques:

Remove unnecessary HTTP Headers to make responses lighter. Also, this will enhance your back-end security.
Pre-validate the HTML form inputs to avoid useless data transfer to the back-end.
Serve the static content from a content delivery network (CDN) to deliver it faster because of geographical proximity to users.

Scalable

Tune and expand

Scalability is either the ability of a system, network, or process to handle a growing amount of useful work with given resources within an acceptable time, or the ability to enlarge itself to accommodate that growth in a capable manner. Scalability varies based on the workload when the performance is fixed.

Modifying a system with given resources to handle a growing amount of work within acceptable time is called performance tuning. Enlarging the resources to handle a growing amount of work in the most capable way, i.e. without adversely affecting the performance, follows a theoretical concept of linear scaling.

A web application's ability to handle a growing amount of workload is achieved by adding resources such as:

processors ( CPUs or GPUs);
memory, i.e. internal memory (usually RAM);
storage, i.e. auxiliary memory (usually HDD or SSD).

Adding resources in form of more nodes (new servers) is a horizontal scaling, also known as scaling out; this is a common practice for web apps coded by dedicated development teams. In contrast, adding resources to the node itself (more CPUs and memory) is a vertical scaling, also known as scaling up; it is common for CMS-based websites.

Scalability can be assessed for acceptable performance thresholds in various dimensions, such as:

Administrative scalability - the ability to serve the increasing number of users by some parts of a single distributed system, without adversely affecting the individual performance for other users that utilize different parts of the same system.
Load scalability - the ability for a distributed system to easily expand and contract its resource pool to accommodate heavier or lighter loads.
Functional scalability - the ability to enhance the system by adding new functionality with least resources and effort.
Geographic scalability - the ability to maintain performance when expanded from a local area to a wide range of geographically distributed locations.
Generation scalability - the ability of a system to scale up by using new generations of components. Thereby, heterogeneous scalability is the ability to use the components from different vendors.

Crucial decisions

Scalability requirements are of key importance when choosing among a very basic drag-and-drop website builder, a pre-built modular web CMS, or to design a fast and scalable custom web application from scratch.

Starting with just a great idea for a web app makes the choice of the technology stack for its implementation a daunting task. Upcoming web entrepreneurs usually do not have time to learn, organize and prepare to solve this task right, also because the scalability planning is intrinsically a forethought of the development process.

In order to increase the chance for success, the evaluation of scalability requirements should precede the development stage and be considered as an important part of the planning stage. Knowing the potential development directions (website builder, CMS, custom-coded) would definitely help to set that cornerstone.

The majority of websites on the Internet are CMS-based, either as SaaS hosted solutions from the respective vendors, or as stand-alone server installations on a hosting. Common open-source CMS can scale up, but have a limited to none ability to scale out efficiently.

Some commercial CMS such as Kentico claim horizontal scalability (see here and here) through a cloud integration. Such vendors provide in-house performance and scalability evaluations as a major marketing argument. However, an educated eye will notice the lack of cost estimates for operation under the claimed loads. Moreover, such technology stacks represent a double vendor lock-in: the first one being the CMS itself, the second one being the specific cloud vendor.

What web hosting?

You may not have enough time and skills to test the anticipated user load on your web app in the development environment. Yet, you have to decide where and how to deploy, such that the benchmarked performance is guaranteed, and the costs will not blow up.

A combination of scalability requirements with the team expertise is sufficient for determining the appropriate hosting for your web app deployment. Among the various hosting options ( subscription-based or usage-based billing) the most flexible and cost-efficient ones are naturally the most demanding in terms of server administration, provisioning, and orchestration.

When choosing a hosting service model ( SaaS, PaaS, and IaaS), the cost factors (time to learn, test, administrate, etc.) are of prime importance. SaaS and PaaS hosting solutions fully or partially absorb the server administration layer otherwise needed for IaaS. Both are likely to offer significant scalability, but at much greater operational costs than IaaS can do.

Search-friendly

Find in web app

Is it easy to find something in your web app?

In a small web site with static pages, this means to navigate between pages, or use the Find functionality of the browser to search for some keywords inside of a page.

In dynamic web sites with a lot of content stored in the database, this means for the user to type keywords into a Search field or a web form, wait for the delivered results, and look through them.

Success of search depends on how well structured or ranked is the returned information. This can be improved by using search and indexing engines such as Lucene , and improving the structurization of the back-end database.

Speed and flexibility are two main parameters of the in-app search functionality. Speed greatly depends on the type of database (SQL, NoSQL, graph), document structure and indexing, technology and scalability of the database engine. Flexibility depends on how the user's input is converted into database queries with linguistic and semantic variants (this may be complicated on multilingual sites).

Find your app on web

Is your website easy to find on the web, and how visible is it in search engines such as Google? These questions are addressed by a set of technologies called search engine optimization (SEO).

SEO is closely related to semantics and accessibility of web pages and data. In general, the more efficient SEO is, the higher ranked and more frequently your site appears in the search results page, and the more visitors it will receive.

In some sense, SEO patterns are opposite to those needed for protecting your web app from the unauthorized access. This is because efficient SEO must disclose more information to web crawlers of search engines.

Static or dynamic?

Static web site is the easiest for SEO because its HTML pages are directly accessible through hyperlinks from the main index page as long as the web server is up and running.

Dynamic web site keeps all content in a back-end database or file system, accessible only via search queries. This makes it difficult to harvest by search engines, unless special SEO measures provide pre-collected keywords in a special headless section of the web site, easily accessed by crawlers, but invisible in the browser.

Overall, inefficient SEO or absence of it can seriously limit the potential of your web app for success, especially in case of a dynamic web site.

Data-flexible

Types of data

Every web app delivers the requested data in form of content to the user. Many web apps also collect the data from users actively as a user-generated content (UGC), and/or silently for web analytics purposes.

Need for storage

Over time, many web apps have to store and process the new or modified data, which is pre-defined or calculated or syndicated. The data structure must be known at least in part in order to store it in the back-end database persistently.

Volatile data can be stored temporarily at the front-end, locally persistent when the browser is offline. The browser web storage can be used both as local storage and session storage.

Insights into how to best store and process the data is key part of most web app development projects, together with considerations on how to make the data easier to handle and manipulate.

Data structures

Unstructured data: mainly text-rich documents stored in file systems or NoSQL databases.
Semi-structured data: text with tags, or key-value data represented as XML or JSON documents in files or NoSQL databases. Graph databases allow delayed structuring of such data.
Structured data is usually understood as traditional data models for the relational (SQL) databases.

Maintainable

Major quality pillar

Maintainable software can be expanded or contracted by the authors and other developers to satisfy new or changing requirements, which may include enhancing existing functionalities, modifying for hardware upgrades, and correcting code errors.

Major cost driver

The total cost of ownership (TCO) for software-based systems includes software, hardware, acquisition, development, and deployment costs. Software life-cycle cost (LCC) typically prevails, with 80-90% of TCO going into the software maintenance.

Designing the code that minimizes the major cost driver - maintenance costs - will dramatically reduce the LCC of operational software.

Success of achieving this goal depends on a combination of best practices and approaches such as KISS, YAGNI, DRY, and staying organized.

Stay organized with:

early planning
modular design
object-oriented design
coding standards
naming conventions
documentation standards
common tool sets
configuration management

Secure

Best practices + testing

Best practices for application security may be easy to formulate, but often hard to comply with. You need to:

know typical threats;
secure the network;
incorporate secure by design coding principles into the software development process.

Finally, all your software security assurance activities should be followed by security testing, i.e. you should try to hack yourself before someone else does.

Web-aware security

What are the latest relevant web app security threats? At least, the OWASP top 10 should be considered.

Applications are pathways into your network and data. The network security policy (NSP) should be appropriate for the complexity of your app, and effectively guarantee the network security.

The best way to protect confidentiality, integrity and availability of your critical systems and applications is to have the software written securely in the first place. This can be achieved by following the secure by design set of principles and techniques that shape the coding processes in vulnerabilities-aware manner, assuming the attacks on app resources and data to happen as an operational daily default.

Comments

Security is often postponed to the end of the development process.
Security as an afterthought does not work.
Security can be expensive, especially if postponed.
Experts with good penetration testing skills are hard to find.
For small startup projects, using a security consulting should be affordable.

What type of web app do you foresee?

Blog

is a web log

The web is full of personal or small-group blogs where people express their thoughts within certain communities and collect comments to maintain discussions.

Typically, blog posts are stored by the web site and displayed in reverse chronological order.

Close to blog is a web forum, i.e. a message board kept online by a company, a non-profit organization, or a professional community (for example, Stackoverflow Q&A site).

Types of blogs:

personal
group (collaborative)
corporate (for marketing, PR)
microblog ( Twitter , Tumblr )
by media ( linklog, photolog, vlog)

Technologies

Free blog service, such as Blogger + blogspot.
Low-cost service, e.g. WordPress , Ghost .
Dedicated blog in your web app (using Poet, for instance).

Wiki

Thinking of Wikipedia?

Wiki is a website with the content developed collaboratively by a community of users, allowing any user to add and edit content. The product unit of wiki site is usually a public article, with all discussions among contributors hidden or accessible on demand only.

Wiki can be seen as a collaborative blog tailored for subject-related aggregation of loosely structured (text) information. However, the typical blog is rather aimed to share ideas in order to trigger a public discussion.

The wiki style has become very popular for providing the reference information on web (e.g. Wikipedia ), as well as for internal or publicly accessible documentation of various projects.

What wiki lets you do:

editing and versioning pages
linking and creating pages
reviewing and controlling pages
navigating between pages
searching through the content

Technology

Wiki can be implemented using one of the web content management systems (CMS). Some of them ( MediaWiki , TWiki and elegant TiddlyWiki ) are featured wiki applications for creating and running wiki sites.

Wiki markup or WYSIWYG text editor, available in many CMS, is a particularly important part of a wiki that allows non-technical users to create and edit content easily.

Popular CMS still use SQL databases to store and search content (pages, images). Rubedo represents an up-coming class of CMS with NoSQL databases. For a small wiki with limited number of users, one can also consider a variant without the database, such as TiddlyWiki, CMSimple or TinyCMS.

eNews

Online newspaper

is a web-based version of a newspaper, either standalone or an online version of a printed periodic publication. Some technology news web sites ( CNET , TechCrunch ) never had a printed version, but enjoy a readership comparable to large newspapers.

Online magazine

has features common with a blog or an online newspaper, but differs by a more strict approach to the editorial process. Editors or editorial boards review submissions for quality assurance. Online journals are typically online magazines of interest to specialists or societies in science, trade or industry.

News aggregator

is a web app that gathers the syndicated web content posted by online newspapers, blogs, podcasts, and video blogs into one place for easy viewing and search.

Web news aggregators are very beneficial for the user because visiting many separate websites to check for the updated content may take a lot of time.

E-news aggregators can be stand-alone web services such as The Huffington Post or be part of large web portals such as Yahoo! News .

eBoutique

Small business website

is a necessity for entrepreneurs, small (home-based) businesses, consultants, artists, and anybody selling products or services on their own. Here we refer to such websites collectively as to e-boutique web apps.

E-boutique enables potential customers to find you by a web search engine like Google Search , to learn more about you, and to download your marketing material. This is key to obtaining new customers and keeping them visiting your e-boutique afterwards.

Running an e-boutique is obvious if you offer online services or sell some products on web. But even if not, your presence can and should serve as extension of your business card, telling relevant things about you, your business, services, artwork or publications.

How to get it right

If e-commerce is only a minor part of your e-boutique, it can be implemented at low costs using a popular CMS like WordPress , Joomla or Drupal on a major web hosting ( comparison). E-commerce can be added via free or low-cost add-ons such as WooCommerce , VirtueMart or Drupal Commerce .

If your e-boutique is aimed at presenting your artwork (or you as artist, singer, dancer, and so on) in an original and appealing style, CMS and templates for them may not be sufficient. For its design and implementation, you may need to hire a professional custom web design boutique/studio/agency.

If your primary purpose is e-commerce with the expected ongoing load of a few hundred visitors per day, then a standard CMS installation on a standard hosting plan is the obvious solution. Moreover, with the hosting plan upgrading and some CMS setup tweaking, you will be able to scale the acceptable visitors load up to a few thousand per day, if required.

Some hints

Providing details on your background, experience, and other credentials in your e-boutique will increase your credibility and give potential customers more confidence in deciding whether or not to deal with you.

Content can be the hardest part of your boutique web app: it needs to be compelling to visitors and to convey the right information at a proper level, so visitors actually read it instead of moving on to the next website.

Be aware that CMS such as WordPress or Drupal provide a great deal of flexibility and choice of original or third-party modules, but your CMS-based web app will be strongly limited for adding non-standard functionality, and it will be very costly (if even possible) to scale in the case your audience expands.

eCommerce

What is this?

Electronic commerce is a fast-growing industry aimed at the purchase and sale of products and/or services (mainly) via the Internet. Main categories of e-commerce regarding the sales scenarios are:

consumer to business (C2B) ;

consumer to consumer (C2C).

Trends include mobile apps for e-commerce, and growth of social commerce via social networks.

Main types

Web-store is a B2B or B2C web service offering the visitor a product selection with help of a shopping search engine; a shopping cart with checkout (run by a shopping cart software) and electronic payment (e.g. from a PayPal account); a postal shipping/tracking or digital distribution/download. The largest web store is Amazon ; there are many smaller ones, implemented using e-commerce platforms.
Online [ reverse] auction is a web service to buy or sell products or services online for a small transaction processing fee. Participants can sell or bid for an auction listing, which is sold to the highest [lowest] bidder. The largest C2C and B2C online auction site is eBay .
Online marketplace is a site that aggregates product or service information provided by multiple third parties, whereas the marketplace operator processes transactions. . This type is represented by very large sites such as Amazon, eBay, Alibaba , Rakuten . Elance is a good example of C2B online marketplace.

Limits and hints

If you plan to launch a web store, a good start would be one of existing e-commerce platforms / systems. The easiest way is to use pre-installed hosted software (SaaS); a more flexible way is to install and configure e-commerce software on a ISP's server (PaaS). Our eBoutique article discusses common CMS solutions that are represented in both flavors on ISPs. However, there are more dedicated platforms to mention, as shown below.

SaaS solution such as Shopify can be recommended for stability, convenience, and dedicated support. The downside is the monthly fee, which can be pretty high when you get many stock keeping units (SKU) and many users.

An e-commerce dedicated SaaS/PaaS solution: Magento - the long-known one - has plenty of features, but is often blamed for that the user interface is not friendly; many web-stores face very slow performance; and custom development is needed even for minor changes.

eLearning

The future of education

E-learning is essentially the network-enabled education technology that transfers skills and knowledge via Internet, local networks or external media carriers pluggable into user's devices. Large amount of e-learning material is provided by web aggregators such as Udemy and e-publishers such as Lynda or PACKT .

Main flavors:

learn at your own pace with eBooks and video cources
real-time learning in virtual classrooms and webinars
time-saving learning by specific Q&A collaboration on professional forums

Biased-content trap

In spite of the fact that all e-learning styles are effective and cost-friendly, in terms of addressing the content, they often resemble the ever-changing fashion industry. There is a lot of hype eBooks, courses, webinars and Q&A on buzz topics and technologies that are aggressively marketed, advertised and promoted in this season.

Making your first steps in e-learning is coupled with tough decisions about the direction to move on and invest your time. Shall I learn some promising open-source technology with only a few to no eBooks available? Or should I study a probably outdated proprietary technology, for which many tutorials, eBooks and video courses pop up when googled?

A comprehensive advice at the initial e-learning stage may be crucial for success in achieving your goals, and may save you a lot of time and money.

Location-based

LBS

Location-based services (LBS) are web applications that use the geolocation data and geoinformation systems (GIS) to enhance functionality.

LBS can use global positioning system (GPS), global system for mobile communications (GSM) or Internet Protocol (IP) address to locate a person or an object in order to discover nearby services (banking, restaurant, supermarket, tank station), friends, or track employees. LBS can also support parcel tracking; vehicle tracking and navigation; mobile commerce; personalized weather services; location-based games, and more.

Many LBS use web map services (WMS) and GIS database access to display maps, locations, or transportation routes.

Importance

Web LBS become important with the growth of smartphone and tablet markets, revolutionizing many aspects of our everyday life. Mapping web platforms such as Google Maps and Bing Maps provide the public access to huge amounts of geographic data. Web-based mobile-commerce LBS such as Yelp , Uber , Groupon add new quality dimension to B2C services. Foursquare enhances this by combining with the social network.

Technologies

Some mapping web platforms, like Google Maps and Open Layers , expose APIs for using geodata within custom web apps. These toolkits offer street maps, aerial/satellite imagery, geocoding, searches, and routing functionality. Web mapping also uncovers the potential of crowdsourcing geodata in projects like OpenStreetMap - a collaborative project aimed at creating a free editable map of the world.

Thin-client UI

Thin client

is a low-end computer terminal which only provides a graphical user interface (GUI) – nowadays in a web browser – to the end user. This is a component of a broader infrastructure, where many clients share their computations with the same server, whose role may vary from providing the central data storage up to the high-performance computing.

Thin-client computing with web app GUI is a good way of reducing the total costs in industry and research because cheaper hardware can be used for clients where no app installation or update is needed. Modern mobile devices (smartphones, tablets) can and should be used as thin clients.

A web thin client only needs a web browser (or a browser-based OS such as Chrome OS ) to run a web app GUI providing the required functionality. HTML5 web apps can use web storage to keep some data locally (in the offline mode), and can perform processing tasks by leveraging the browser as a run-time environment.

Trends

Proliferation of Internet and LANs, along with the progress of web apps, has led to an increasing demand for web-based GUIs for remote access to industrial processes and data acquisition systems. Such GUIs can accept process controls and deliver the data in electronic table, plotting, and key-value file formats ( csv, xml , json , vtk ).

This recent trend is manifested in a commercial LabVIEW Web UI Builder for creating LabVIEW web applications using graphical programming. Another example is OpenUI5 - an open-sourced SAPUI5 web app framework.

In academic research, especially where large-volume data acquisition or large-scale computer-aided simulations are involved, there is a growing need for web GUIs that could replace traditional desktop PC apps. This is relevant in view of far insufficient funding for the IT support and code development in most research programs and grants.

Technology

A web thin-client UI can be developed using one of commercial or open-source web application frameworks (WAF).

Actual costs and time of development can be dramatically reduced by making proper early decisions (during the project planning and prototyping stages) about the GUI functionality to be implemented, and on the choice of WAF (see a comparison of web application frameworks).

Social network

SNS

or social networking site (SNS) is a web platform to build social relations and networks among people who share interests, activities, backgrounds or real-life connections.

SNS allows the user to sign in, create a public profile, and interact with other users. The user is expected to input a list of people whom to offer a connection, which these people have to confirm or deny. Then the user is encouraged to search the networks of his new connections in order to establish more connections and, thus, extend her own network.

SNS support various forms of communication between users (chat, twit, email, audio or video calls), and offer tools to easily share online (multimedia) content of all types. This makes any SNS a complex web app with advanced front-end and back-end functionality and databases, in most cases developed and maintained by a dedicated IT engineering team. Alternatives include BuddyPress - a SNS running on WordPress CMS, and innovative diaspora* implementing a distributed SNS.

Main SNS types

In general, SNS can be classified into:

category places (such as classmates);
means to connect with friends;
and trustful recommendation systems.

Popular SNS combine many of these classes. A more detailed breakdown is given below:

social - connections with friends and family ( Facebook , Twitter , Google+ );
multimedia sharing ( YouTube , Flickr , Picasa , Instagram );
professional - for career-related growth ( LinkedIn , Classroom 2.0 );
informational - Q&A for communities seeking answers to everyday problems ( Quora );
educational - for students to collaborate with others on study or academic projects ( The Math Forum);
hobbies - to conduct research on topics related to personal hobbies ( Oh My Bloom, SportShouting);
academic - for researches to share their results review others ( ResearchGate , Academia.edu ).

Concerns

Privacy dilution.
Continuous partial attention (CPA) and overchoice can lead to information fatigue syndrome (IFS).
Centralization (as opposed to decentralization).
Hidden data mining and surveillance.
Abuse by trolling, fake identities.
Risk of unauthorized access to user profiles.
Use of SNS in legal and criminal investigations.
Limited to no user control over 3 ^rd party access to her SNS data.

Browser game

is an electronic game which is played over the Internet in a web browser, either using standard web technologies or browser plugins. Browser games can be single- or multi-player and cover all video game genres. They can be played on PCs, TV screens or mobile devices.

Games may be seen as a waste of time. However, the experience of browser game development can greatly help you in implementing the gamification of features like learning achievements, high scores, leveling up, leaderboards, which may be pivotal for retaining the users interested in your web app.

A good example is Duolingo - a modern adaptive web app for learning languages, combining content syndication, gamification and e-learning concepts.

Technologies

such as HTML, CSS, JavaScript on front-end and various back-end script languages can all be used to make browser games.

Dedicated HTML5 technologies (SVG, canvas) allow fast rendering of vector and bitmap graphics, respectively; WebGL allows for hardware-accelerated 3D graphics support.

Browser plugins provide even more specialized game technologies (Flash, Java, Shockwave, Silverlight), but need to be installed by the user.

Modern tools

There is a bunch of tools for HTML5 game development that allow creating dynamic interactive browser games and websites. More specifically, the HTML5 game platform involves technologies such as Web Audio API (audio); Three.js, WebGL (graphics); Touch events, Gamepad API, WebRTC, Pointer Lock API (input); JavaScript or C/C++ using Emscripten to compile to JavaScript (language); HTML5 WebSocket or AJAX Long Polling (networking); IndexedDB or Local Storage (storage); HTML, CSS, SVG, Social API and more (web).

IM/Chat

Instant messaging

(IM) is a set of technologies providing the text-based communication in real time between two or more participants over the Internet. Text messages are usually saved on server for the later reference.

IM web services such as Skype provide extensions where the users may see each other via webcams, or talk directly using a microphone and headphones or a loudspeaker. Additionally, a limited-size file transfer is possible.

With the rise of mobile, large social networks become the user base of most IM services, for instance Facebook (+ Instagram + WhatsApp ); Tencent QQ ; Google ( Google+ and YouTube ); Microsoft (Skype); Twitter ; LinkedIn ; Yahoo! Messenger .

Web chat

allows the users to communicate text messages in real time using an easily accessible web interface via web browser only. This type of online chat is marked by its simplicity for users who do not wish to install and learn the specialized chat software. Often, web chat is part of web conferencing, where it allows several users to communicate at the same time (a variant of the chat room).

Implementation

of IM or chat services has been traditionally difficult until the advent of asynchronous web servers such as node.js plus socket.io that greatly simplify the development process and reduce the costs.

For most small web apps, it is sufficient to use the IM/chat functionality of a common SaaS platform such as Gmail or Dropbox . For larger applications, an own dedicated IM/chat solution is a natural choice because of security, control and cost considerations.

A recent example is PEPS Chat - a secure multi-channel chat app for the PEPS collaborative communication platform. However, this and similar SaaS services become expensive when the number of user accounts exceeds 30-50.

Syndication

Web syndication

(in contrast to web distribution ) is a form of web site operation, when some versioned reusable content is supplied either for direct consumption (B2C case) or for aggregation, integration and publishing with their own content (B2B case), often through a paid service subscription. There are several types of web syndication:

adaptive presentation with subsequent syndication of the web app itself using artificial intelligence and statistical data processing methods
web feeds ( RSS, Atom) to direct subscribers via feed readers
podcasts to direct subscribers via podcatchers
webcasts to direct subscribers via live or on-demand streaming to the user's browser
standalone content licensed to other web sites on the Internet that make it available to end users; typical examples are ads, comics, news articles, books, video courses, music, films, video clips, etc.

Adaptive presentation

is a syndication of dedicated layout and content of an adaptive presentation web app. This is the most complex type of web service, which can utilize many advanced back-end technologies, such as artificial intelligence (AI) and statistical data analysis.

Content syndication

is an interaction of websites that provide information with websites that display it. For the transmitting site, it enhances the exposure across other online platforms. For the receiving site, it is an effective way of adding greater depth and actuality of information to its pages, making it more attractive to users. Taking advantage of closely related SEO technologies, web syndication becomes an easy and relatively inexpensive form of advertising.

Technically, a modern web app requires

Front-end

The client-side

Front-end is a part of the web app that the user sees and interacts with directly. The client-side data is delivered from the back-end to the user's computer, where the client-side content (texts, images, videos, animations etc.) is displayed, and the client-side code is executed in the user's browser.

Three-fold front-end development world

The front-end coding is the domain of front-end engineers. They write the client-side code and, therefore, are limited to only a few technologies supported in all web browsers: HTML, CSS, JavaScript and local web storage.

The content part design results from many techniques used by UI (user interface) designers, digital media producers, journalists, copywriters, and SEO specialists.

The persuasive manipulation part is architected by UX (user experience), NLP (neuro-linguistic programing), and marketing professionals.

Idea ⇝ prototype ⤏ back-end

The coding part of the front-end is usually preceded by wireframing, mockuping and prototyping stages, performed by the UX/UI professionals in close collaboration with a visionary entrepreneur - the business idea holder.

These early front-end development stages are often done using professional software tools such as Axure RP .

The prototype documentation guides front-end engineers until the client-side code is fully connected to the back-end.

Front-end can be implemented in many ways that differ dramatically in the incurred development costs and in the page load time on the user's device.

For 90% of web projects, however, the CMS and web builder solutions are sufficient and require zero to medium coding skills.

Back-end

The server-side

Back-end is a part of the web app running on remote computers (servers) on the Internet. The server-side code is executed on application servers that respond to access requests and analyze, manipulate and store data in databases. The client-side data is sent over the Internet to the user's browser upon request.

Multi-fold back-end coding universe

Unlike front-end engineers, back-end developers are not forced to use just a few technologies supported across web browsers, and thus code in many purpose-based programming languages.

Back-end is organized and monitored by sysadmins and network administrators.

Back-end data storage is designed by data architects, maintained by database administrators, analyzed by data wrangling and data mining professionals.

Back-end is connected to 3 ^rd party web services by web API programmers.

Back-end vulnerabilities are assessed and secured by penetration testing and application security experts.

Considerations

The same back-end functionality can be implemented in various programming languages, using different libraries or even CMS frameworks, and different database types (SQL, NoSQL) to store and search the data.

However, this diversity bears serious risks because a wrong choice may blow up the time-money constraints at the stage of implementation, and seriously limit performance of the web app at the production stage.

To minimize such risks, relevant decisions have to be made at early stages of the project planning.

Databases

What is a web DB?

Database (DB) is an organized collection of data that can be queried over the Internet using a web application. Most web apps operate with huge back-end DBs that can only be manipulated by direct queries, either from the DB console or by users from the front-end request forms.

A web DB usually appears as a back-end server that runs a database driver - a program, with which the web app interacts with the DB. The DB driver API must provide SCRUD (search-create-read-update-delete) requests, support indexing of records and complex search queries.

DB drivers perform the data requests that are either ACID or BASE. Note however, that requests to distributed DBs are subject to the CAP theorem stating that it is impossible to simultaneously guarantee: consistency (C) - all nodes see the same data at the same time; availability (A) - every request receives a response about whether it succeeded or failed; and partition tolerance (P) -continued operation despite arbitrary partitioning due to network failures.

Small DBs can be implemented using lite embedded in-app drivers keeping the data in files on the application file system, for instance, SQLite or EJDB.

The right type of DB for your web app is determined by the relevant conceptual data model. The related choice of a database model will greatly influence many aspects of site development and operation, such as implementation time, development and running costs, performance, and security. Often, two DBs (of different types) are maintained at the back-end: one for the main content, and another for keeping the data about registered users and their on-site activity.

Main DB types

Relational (SQL) DBs are widely used for storing financial records, manufacturing and logistical information, personnel data, user accounts, and other simple-structured data that can be represented as tables and joins between their rows. Such DBs are accessed using SQL queries. Popular SQL DB engines are Oracle, MySQL, PostgreSQL, Microsoft SQL server (see a comparison here).

NoSQL (Not Only SQL) DBs are increasingly used in big-data and real-time web apps. Main categories of NoSQL DBs:

Key-value stores and native XML databases operate with the associative arrays of data consisting of key-value pairs. Enterprise DBMS of this type use XSLT-processed XML documents (also storing them natively). Examples of fast in-memory key-value stores are Redis and Tarantool . HBase is a large distributed key-value store.
Document-oriented DBs manage the document-oriented information, also known as semi-structured or self-describing data, expressed in XML or JSON formats. Popular NoSQL DB engines are MongDB , CouchDB .
Graph DBs use graph structures for semantic queries, with nodes, edges (links) and properties to represent, store and traverse the data. Usually, the nodes are XML or JSON documents, and the DB driver allows delayed creation of new property links (edges) between the nodes, which leads to progressive content structurization. Examples are Neo4j and ArangoDB.

Multi-model DBs support multiple data models (document, graph, relational, key-value, user-defined) through an integrated API. OrientDB and ArangoDB engines can handle documents and graphs. FoundationDB features layers on top of key-value store. Cassandra DB is essentially a hybrid between a key-value and a wide-column (or tabular) database.

DB scale and efficiency

Big data requires scalability : not only the ability to store a lot of data, but also to serve that data effectively to web apps that must support terabytes of data and millions of users, while sustaining throughput that keeps those users happy. Also important is how efficiently the DB uses resources in terms of nodes and processor cores. A DB requiring far fewer resources will have a considerable cost advantage.

Performance at scale for the most demanding web, mobile, and IoT (internet of things) applications can only be demonstrated by benchmarking, which can convince potential customers in how a certain DB type and driver can support their application requirements, and scale as those evolve. Main requirements for benchmark tests are:

select workloads that are typical of today’s modern applications;
use data volumes representative of ‘big data’ datasets that exceed the RAM capacity for each DB node;
ensure that all data was written with no data loss, which is what the production environments require.

Alive-monitor

What to monitor?

Network and website monitoring tools/services are there to help you avoid your web service being taken offline and evaluate whether your demand for resources has outgrown your infrastructure.

Either you run a small website on a single node (server) or orchestrate a large application on a network (multiple servers), it is helpful to be aware of any issues as soon as they occur. Most basic and intuitive issues you might be willing to track are:

Node status: is the server alive?
Software status: is the program running on a particular node?
Node resources: are the available processor, memory etc. used up?

Hundreds of freeware or proprietary tools and dozens of commercial server/network monitoring services can potentially help you supervise your infrastructure for any issues that may arise. It is doubtful that there is a complete reference list, but you can get a feeling of the diversity by looking at a selection of only 80 Linux monitoring tools.

Paid monitoring services, advanced network orchestrators, database-related technologies, and cutting-edge dedicated micro-solutions ensure even more decision complexity for your sysadmin activities.

Appropriate tools

The goals of effective server/network monitoring can be reached in different ways depending on the infrastructure stack for your application deployment.

Simple CMS-based websites on a standard ISP shared hosting plans usually do not require any monitoring at all. ISPs are doing all the monitoring tasks and notify their customers immediately in case additional resources need to be purchased to continue website operation.

For small to medium-sized CMS-based websites on a single - to some extent managed - dedicated server, the ISP usually offers a pre-configured web hosting control panel. There are many control panels available, but ISPs tend to operate the commercial cPanel , Plesk or the free Webmin control panel tool as part of the offering at this level.

For large CMS-based or custom-coded websites on a single (or on a few) server(s) with guaranteed resources, i.e. VPS, DPS, cloud or any other full-featured hosting plan with a root access, the ISP would assume your ability to administer everything beyond the daily back-up and some up-time guarantee. Such systems can be effectively monitored by your own installation of the control panel of choice.

Finally, custom-coded applications, especially if developed with horizontal scalability in mind, will rapidly outgrow the administrating abilities of common control panels, and thus will need a dedicated stack of various advanced monitoring and orchestrating tools.

What is important?

When choosing a monitoring stack for custom-coded applications, the following aspects are of particular importance:

scalability
time to learn
cost to operate
ease to operate
notification via email, SMS etc.
virtual container support
self-repairing capability

Load-balancer

Load balancing

is a process of distributing workload across multiple computing resources, such as web servers, CPUs, or disk drives. Load balancing aims at optimizing the use of resources, maximizing throughput, minimizing response time, and avoiding the overload of any single resource.

Using many servers with load balancing increases reliability and availability via resource-optimized N+1 redundancy implementation for a failover, i.e. a continuation of a service after the failure of one or more of its continuously monitored components. For instance, web servers can be monitored by fetching and analyzing the heartbeat; when a server becomes non-responsive, the load balancer will stop sending traffic to it. A common use of load balancing is to provide a single web service from multiple servers, sometimes called a server farm .

On a shared web hosting, the ISP (hopefully) takes care of balancing and cashing. On VPS and larger web hosting solutions, you can install and configure some dedicated software to perform the web caching and/or the load balancing tasks.

How it is done?

There are several dedicated and hybrid solutions to perform load-balancing and caching on VPS (in alphabetical order).

HAProxy is a free, open source high availability solution, providing load balancing and proxying for TCP/IP and HTTP-based applications by spreading requests across multiple servers.

Nginx is a free, open source web server with a strong focus on high concurrency, performance and low memory usage. It can act as a reverse proxy server for HTTP, HTTPS, SMTP, POP3, and IMAP protocols, as well as a load-balancer and a HTTP web cache. Nginx is a champion in fast serving of the static content, but it has slightly less fine-tuning options for load balancing and/or caching than other dedicated programs.

Squid is a caching and forwarding web proxy. It is used (often in combination with Nginx) for speeding up a web app by caching repeated requests; for caching web, DNS and other computer network lookups for a group of people sharing network resources; and to enhance security by filtering the traffic.

Varnish is a (exclusively) HTTP web cache designed for content-heavy dynamic web sites and heavily consumed web APIs. Varnish is used by a great number of high-profile, high-traffic websites including online newspapers, Wikipedia, Facebook, Twitter and many more.

Limitations

Persistence is an issue when operating a load-balanced web service. How to handle the data that must be kept across multiple requests in a user session?

If the data is stored locally on one back-end server then the subsequent requests going to different back-end servers would not be able to find it. Ideally, the cluster of servers behind the load-balancer should be session-aware, so, if a client connects to any back-end server at any time, the user experience is unaffected. This is usually achieved with a shared database or an in-memory session database.

Another solution is to send all requests in a user session consistently to the same back-end server. The drawback of both sticky-session techniques may be the lack of automatic failover.

Orchestrator

For resources and services

Orchestration is one of the dedicated service layers of an agile application. The purpose of an orchestration layer is the automation of:

infrastructure coordination - to create an application-aligned infrastructure that can be scaled up/out or down/in based on the needs of each application. Infrastructure orchestration is an automation abstraction layer over software-defined networking (SDN) and/or network functions virtualization (NFV) architectures. It is a service application that can accept requests for change, analyze the network configuration, and implement the configuration change;
services interaction - to integrate two or more applications and/or web services into an aligned process, or synchronize data in real-time. Services orchestration decouples applications from each other, ensures reliable message routing, and provides a way to manage integrations centrally;
composing into services choreography - to realize skeletons (incomplete service orchestrations) and to determine the feasibility of an enacted choreography, i.e. when its participants collaborate executing their roles via message-based interactions.

Why bother about it?

At a first glance, the need for orchestration layer is not obvious, especially in view of the fact that most applications are deployed on SaaS (website builders, CMS-based) or on PaaS (CMS-based, custom-coded) platforms already managed by the hosting vendors. Hence, many issues that could possibly arise with provisioning, automation, and orchestration are caught and handled behind the scenes. This is what SaaS/PaaS advertisements promise.

However, the need for an orchestration layer becomes more reasonable if the following considerations apply:

scalability under reasonable costs
break out of vendor lock-ins
resources diversification
infrastructure diversification
risk reduction via portfolio creation (vendors, platforms)
learn and prepare for complexity ( IoT)
need and ability to test and optimize the deployment

Software types

Orchestrator is software that automates tasks related to managing and coordinating complex on/off-premises, resources, and services. A vast majority of management software is offering various degrees of orchestrating functionality, either as task-specific utilities or as multi-purpose software solutions. As an example, consider a list of options available to manage kvm virtual machines. As you dive deeper into the topic of orchestration, you will notice that some of the listed options are not limited to kvm machines only, but are powerful tools for orchestration of various deployment environments indeed.

For small to medium-sized deployments on standard hosting plans, ISPs usually offer pre-configured web hosting control panels. Additional modules exist to extend their functionality by allowing management of multiple nodes (servers). For example, a pure open source stack capable of managing dozens of nodes is a Webmin + Virtualmin GPL + Cloudmin GPL triple-installation.

When looking at cloud management software offered by cloud hosting providers (for example here), you will notice that most vendors propose their own proprietary solution. However, one has to keep in mind that IaaS allow 3 ^rd party installations of open source or proprietary software such as OpenStack , OnApp , CloudStack , etc.

Proprietary cloud management software for managing multi-cloud infrastructure across multiple IaaS providers is marketed simultaneously as SaaS and/or as stand-alone on/off-premises installation for your IaaS/PaaS deployment, e.g. Scalr , RightScale , Dell Cloud Manager (formerly Enstratius) , HP Helion Eucalyptus , etc.

SaaS offers are advertised as Cloud Services Brokerage (CSB). The same software offered for on/off-premises installation is called Cloud Management Software / Platform.

Integration

Automation

Searching the Internet for programming and/or management tools for software development results in showing articles related to:

source code editing ( textual or WYSIWYG)
codebase versioning ( revision control)
continuous integration (agile practice)
continuous delivery ( time to market)
code coverage (measure)
code review (collaborate)
code documentation ( generate)
code quality (produce quality software)
browser tools (emulate device/network)
web application testing (test)
systems design ( model the abstractions)
project management ( estimate, plan, and track)

Although the above-mentioned topics are very different in their purpose, they are supported by modern tools that not only automate repetitive tasks, but also offer a various extent of integration among them, thus allowing the engineering team to really focus on programming problems.

Editing

Pure WYSIWYG editors are built into various software solutions. They are typical for developing websites by website builders or by CMS, for prototyping applications, and for modeling various abstractions in systems design. More than often a combination of built-in WYSIWYG and external textual editor is used to tweak settings and configuration for CMS-based applications.

Custom-coded applications pose a natural demand for editing solutions that allow for actual coding. The choice of the right tool:

OS native system default text editor;
IDE (integrated development environment);
highly-customizable source code editor,

has its own justification depending on what part of the app you are editing/ coding, which scripting language you use, and whether or not you are dealing with legacy codebase.

A system default editor is inevitable for simple editing of configuration files. Developers often find themselves in situations where the only available editor is a shell-based system default, e.g. on an embedded system or on a headless server.

IDEs provide integration of useful functionalities out of the box, i.e. without the need for extensive configuration work. There are languages for which you will find a broad agreement among developers that an IDE is a necessity for development. Common examples are Eclipse for Java , and Visual Studio for .NET languages , e.g. C# , VB.NET .

Highly-customizable editors such as Emacs , Sublime Text , and Vim demand a much steeper learning curve in comparison to IDEs. Customizing the editor with plugins is a continuous process due to the fact that at any given time point, there are multiple plugins and integratable components available to choose from. Hence, the natural desire to test a new trending workflow stack, or the need to assemble a bulletproof stack for fast development, explain why developers learn the programming language faster and more completely when taking this route.

Lifecycle management

On the market, there are all levels of software solutions for the application lifecycle management (ALM), starting from all-inclusive SaaS or stand-alone software, and going deep down to manual assembling of a high-end stack from various alternative components.

Nowadays, web applications are created, maintained, and continuously improved by small teams consisting of business- and technology engineers. Hence, the integration of ALM components into an efficient workflow stack must ensure/enable:

collaboration - for team members;
automation - of repetitive tasks;
access levels - for stakeholders,

in order to reach the ultimate goal of significantly reduced cycle times.

An elaborated ALM workflow stack consists of several key software products designed for accelerating the delivery of desired functionalities, and a central dashboard targeted at managing the core lifecycle of an application, i.e. a repetitive research, design/prototype, develop, deploy, test, improve sequence.

Virtualization

Virtual environment

Virtualization has several aspects, one of which is full virtualization that allows a complete simulation of the server hardware, another important one is operating-system-level virtualization , e.g. VPS - the IaaS form of web hosting, managed and maintained by ISP or by cloud service.

Virtual environments for development and deployment are relevant in non-CMS-based web app projects. This is because team members may have different laptops and desktops running different operating systems (OS), in turn different from OS on production servers.

It is an advantage for all development team members to work within the same production-like virtual environment. At least one team member must learn the virtualization tools in order to configure the development environment for the whole team.

How to do it?

To create a portable production-like environment for development purposes, you can use several levels of virtualization, supported by dedicated software tools:

Actual operating system (OS) on the desktop or laptop.
Virtual development environment wrapper, e.g. Vagrant .
VirtualBox , Parallels Desktop , VMware Workstation and other hypervisors.
Development OS running in a hosted hypervisor, e.g. Ubuntu Server , CentOS , CoreOS , etc.
Packaging application and its dependencies into Docker software containers for the most flexible development and deployment.

All team members should be able to easily set up the same application development environment on their desktops or laptops.

What you gain?

A close similarity of the virtual development environment to the actual deployment/production environment gives the team members more time to learn the necessary development tools, configuration, monitoring, and orchestration techniques. It also saves time that would otherwise be lost on fighting with technical issues due to different OSes or hardware. Moreover, different production environments can be simulated and tested in parallel.

Provisioning

What is this?

Provisioning is essentially the automation of a network and server setup for the virtual development and/or actual deployment/production environments.

Putting a new (version of) application onto a prepared server is a process of the application deployment. Hence, the automation of preparatory steps such as installing necessary 3 ^rd party software, libraries or daemons, is a process of the application provisioning. Configuration management - part of provisioning that comes right after initial installations - consists in adapting default settings toward the application needs.

In addition to the initial configuration management, provisioning tools can have alive-monitoring capability and/or various orchestration functionalities. A typical example is the ability to perform configuration management repeatedly to cope with ongoing changes of the software / hardware / system, i.e. an important orchestration functionality for non-disposable components.

Why is this needed?

Development and production environments consist of layers of software components, e.g. operating system, 3 ^rd party software, and the actual application code. With time, various upgrades, patches and manual one-time hacks/edits transform the environment into a set of snowflake nodes. Soon, a configuration drift makes automated deployments impossible without a certain manual tweaking, demanding the execution of some critical functions that only one person knows about.

Configuration drift can be avoided by implementing the provisioning policy of immutable infrastructure with disposable components only. Turning as many nodes as possible into phoenix servers is a first optimization step ( immutable policy). Once deployed, a node is never modified, it will be merely replaced with a new provisioned instance whenever needed.

Further optimization objectives are the speed of deployment and the minimization of system vulnerability (disposable components policy). This is where the software containerization comes in, allowing for a modular design from some building blocks such as microservices (single service per container) and/or unikernels.

Tools and services

In case of SaaS and PaaS deployments, the provisioning step is either fully managed or semi-automated, i.e. being a core service from the hosting vendor.

Provisioning of IaaS deployments is performed with tools or services usually marketed as configuration management solutions. Popular examples include:

HTML

Pure HTML5

Hypertext Markup Language (HTML) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on web pages. Current standard is HTML5, developed with emphasis on web accessibility and semantic HTML. Compared with the previous HTML4.1 standard, many text-formatting tags were deprecated in favor of CSS, and many new semantic tags were added to HTML5 specification (see the current status on official W3C and the useful reference on W3Schools ).

HTML markup is rendered on a client computer by a web browser. Today, there are 9 (desktop and mobile) major web browsers, most running in several versions. Some HTML5 functionality is not yet supported by some browsers or some older versions; this can be checked e.g. on CanIUse site. Missing HTML5 functionality in a particular browser can be detected at runtime with libraries such as Modernizr , and then substituted by sending a web polyfill, i.e. a special shim for a browser API.

In HTML, as in other verbose computer languages, there are typical sections of the code that occur in many places with no or little modification. Such repetitive sections are called boilerplate code . A typical example is HTML5 Boilerplate, a front-end kickstart template that defines an optimized structure of the HTML document (head, title, and body). The use of boilerplate code is greatly simplified by metaprogramming languages and preprocessors, in particular by web templating systems and web application frameworks.

JavaScript libraries and frameworks

When information provided by the web app may change or is too large to be maintained in various HTML pages by the available human resources, the JavaScript templating can be useful.

The templating functionality is often a part of generic JavaScript libraries ( jQuery , React ) and JavaScript frameworks for creating dynamic web pages.

The popular concept of software framework refers to software providing generic functionality that can be selectively changed by adding the user-written code, thus resulting in an application-specific software. Frameworks differ from common libraries in the following aspects:

enforcement of a certain way of implementing the solution;
inversion of control that is dictated by the framework, not by the caller;
useful (non-trivial) default behavior;
extensibility (by additional or overriding code);
non-modifiable framework code.

Examples of web application frameworks based on various programming languages can be seen here. The recent list of JavaScript-based frameworks utilizing MVC pattern and its MV*-evolvings can be seen here.

HTML templating languages

Pure HTML can be used for creating static templates only (often confused with related, but very different concepts of static and dynamic web pages ). However, coding in pure HTML involves a major repetition because each HTML element is named twice: once before its content, and once after.

HTML template/markup/extension languages such as Haml , Jade, and Jinja - as parts of the respective preprocessors - were designed in order to add the missing dynamic template creation functionality by means of mixins, logical and looping operators. Also, they determine where elements and blocks of code begin and end, thus avoiding the repetition. This makes the dynamic template code (to be pre-processed into a HTML document) clean and compact.

In addition, the preprocessing step that generates the HTML code is useful for detecting bugs. It also facilitates creation of modular architecture of web pages, as well as automatic generation of boilerplates and re-use of code snippets.

CSS

Pure CSS3 language

CSS ( Cascading Style Sheets) defines the styles in which HTML elements are displayed on web pages. Primary goal of CSS is to enable the separation of the document content from its presentation style defined by layouts, colors, fonts, etc., normally saved into separate .css files. Modification of such a file can change the look and feel of the entire web site, thus saving a lot of work. In the latest standard (CSS3), possible style definitions were grouped into several modules.

New features of CSS3 make Adobe Flash Player and some JavaScript libraries obsolete. Although most new CSS3 properties are implemented in modern browsers, some features are not supported (especially in older versions of browsers). The CanIUse website provides accurate information about such cases.

Icon fonts ( Font Awesome , IcoMoon, etc.) can be treated and styled exactly like text; they can be proportionally scaled for high-resolution displays, thus representing a better and sharper alternative to classic raster-graphics icons in .png or .jpg format. Using CSS, one can add an icon in line with text, to a navigation item, or to the title; or use the icon as a hyperlink. Multiple icons can be styled at once, even with CSS animations.

Scalable vector graphics (SVG) is the core HTML5/CSS3 companion technology for scalable graphics (icons, logos, maps etc.). Along with CSS3 transitions, CSS3 animations, and CSS3 transformations, the SVG is of key importance for assisting sharp and clean animations.

CSS grid systems recently became a game changer when choosing between pure CSS or preprocessor frameworks. A grid system is a structure that allows for the content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Grid systems increase productivity by providing layout scaffolding to HTML design; they are versatile and adaptable; and they are ideal for responsive layouts that implement the RWD concept (see Responsive widget on this web site).

Pure CSS frameworks and grids

Software frameworks provide core functionality that can be selectively changed or extended by adding the user-written code, thus creating application software. Pure CSS frameworks provide pre-built UI elements, i.e. an UI library, as a core part of the framework itself. Pure means that the actual useful parts of the framework are in pure CSS code. This might be confusing at a first glance, as almost all pure CSS frameworks are developed in CSS extension languages (Twitter Bootstrap in Less; ZURB Foundation in Sass, etc.), but compiled into pure CSS and intended to be used as such.

Among pure CSS frameworks, most popular are Bootstrap, Foundation, IVORY, Kube, Pure, Semantic UI. Using such frameworks does not even require learning CSS language in detail.

Pure CSS grid systems - if not part of a CSS framework - include: 960, Responsive Grid System, Sceleton, etc. Their purpose is to facilitate creation of grid layouts.

Pure CSS frameworks and pure CSS grids are very useful for freelancers, back-end engineers, graphic designers, UX architects, UI designers, all working within tight budgets, pre-defined time constraints/deadlines, and requirements for deep backward compatibility for major browsers. The pre-built UI elements in a pure CSS framework make creation of a working layout an assembly task rather than a coding endeavor.

As a pitfall of using pure CSS frameworks, you do not learn CSS language, and thus cannot do things differently (smaller, faster, no cutting edge techniques). You have to overpopulate your HTML content with CSS class names, and need to serve framework scripts as part of your client-side code (even for the minimal styling) just to make it work. You risk becoming a slave to the first choice of a grid layout because further grid changes during development will inevitably mess up all your styling. Your website style will be just as good as very many others on the web that were built with the same framework, but not better.

CSS extension languages

Three major CSS extension languages are Sass , Less , and Stylus , all pre-processed into CSS. Unlike for pure CSS, the preprocessor frameworks usually do not focus on providing pre-built UI components, but rather offer a stack of useful code to build a consistent UI design from scratch. Moreover, they do not require to include and serve their CSS and scripts code as a part of your client-side code.

Instead of using pure CSS frameworks, a professional front-end developer tends to assemble her/his own stack around a CSS extension language, and then build her own UI component library. This makes sense because logical and looping operators in the extension language allow coding of advanced styling designs and generated UI elements. They are also KISS compliant, support modular design, auto-prefixing, configurable backward compatibility, and result in a slim code base - everything that a professional developer can dream about.

The development stack - a custom CSS preprocessor framework - is assembled as a collection of automation tools, the CSS preprocessor (CSS extension language + compiler into pure CSS), mixin libraries, grid systems, and other toolkits (like those for dealing with fonts, for example). An efficient and well-tested stack can be regarded as a product on its own, useful for other front-end developers.

Scripts

Front-end

scripts are needed to program fast, intuitive user experiences that are not forcing the user to refresh the web page for viewing the actual content updates. Most of this has been done earlier by leveraging the plug-ins paradigm of rich internet applications (RIA). With time, installable plug-ins were replaced by AJAX-based alternatives that do not require installation. There are AJAX-frameworks for various programming languages and, in particular, generic JavaScript-based libraries such as jQuery.

Nowadays, the development of dynamic interactive web apps is usually powered by JavaScript template libraries, component libraries, and front-end frameworks . Examples include Angular , Aurelia, Backbone , Ember , Polymer, React .

To support advanced graphics and visualization based on the HTML5 canvas or on SVG, libraries such as D3.js , Three.js , Konva are offered.

Common UI elements/ widgets are very likely already pre-coded and can be found in stand-alone UI libraries ( Semantic UI) or accompanying the respective frameworks, for instance jQuery UI , AngularUI, React UI Components.

Dedicated commercial UI element libraries for enterprise-specific applications are also under active development. The offerings cover both the libraries based on old technology stack for browser legacy support ( Wijmo 3 on jQuery), and those based on the most recent stack for integration with current frameworks, e.g. Wijmo 5 with official support for Angular and Knockout .

Back-end

software can be coded in many languages, most popular being Java , JavaScript , Perl , PHP , Python , Ruby , and emerging languages such as Go , Julia , Lua , Rust , Swift of increasing popularity for network, system, and scientific applications.

Most server-side tasks can be programmed in any language. Code Clinic is a series of ten courses on lynda.com, where the authors solve the same problem by coding in ten different languages.

Which script language to use? The growing popularity of node.js gives an argument for learning one language - JavaScript - and code the whole web app from back-end to front-end. Another argument (in favor of the back-end) is to choose the language that can be executed fast (C++, Python) for the top performance. No Starch for kids provides some hints about programming languages that potential employees will use in the near future.

OS, database, etc.

Front- and back-end scripts cover only part of what is needed to run a web app. The web server resides on a (virtual) host OS, with various functionalities configured and controlled by shell scripts (bash, sh) or Python scripts.

Most web services involve databases, which can be accessed (from the console) using JavaScript with JSON or query script languages ( SQL, Gremlin, Cypher, etc.) along with dedicated APIs to communicate with the back-end code.

In statistics- and data-heavy web apps, using the R language with its data wrangling functionality can be a significant advantage for the data analysis. These scripts provide easy transformations of tabular data, as well as simple statistics and matrix operations (see Cookbook for R, for example).

Ways and steps to create your web app

Do it yourself

Boss on your own

Never before were web IT technologies so powerful, and never before it was so easy to find, download, install and learn the required software tools. Most useful of them are, in fact, open-source projects, supported by books and video-courses accessible on e-learning web sites.

Apart from a general educational background (high school, college or university), you would need a reasonable idea on what type of web app to build, and how to put realistic limits onto the extent of the project and on the sequence of functionality to be implemented.

To go beyond a simplest project on standard basis (CMS + web hosting), you will need a lot of persistence, endurance, and marathon-runner ability to work. Our experience is that such qualities develop during university graduation or PhD studies.

Why do it alone?

One reason is the simplicity of the project such as e-boutique, wiki or blog. It may cost you less time and money to prototype and implement it yourself than to explain what you want to have to a web design studio consultant. In 90% cases, your elegant web app can be built using WordPress or another CMS with necessary plugins on a standard hosting plan.

Another obvious reason is the lack of money, if you plan an ambitious web service with no analogs or which cannot be implemented on the basis of CMS. At least you will have to build and launch a MVP and then go out and present yourself to potential investors.

If you dream of a global web service with a billion of user accounts and thousands of simultaneously processed requests, it would make a lot of sense to spend time on learning scalability issues and related technologies, and use them even at first stages. This will at least give you some experience and advantage for future negotiations and teambuilding.

Dangers and risks

If you are not a skilled web programmer, and your web app cannot be done on CMS, count with a steep learning curve over several months if not years, before you will become truly productive in implementing your ideas as web apps.

Except simple projects such as e-boutique on WordPress (which can be done in a few weekends), it is difficult without help of a consultant to estimate in beforehand how much time will be needed, especially when doing it for the first time.

Even if you have a lot of money, a minimal do it yourself (DIY) part of your project is to make a mid-fidelity prototype using modern tools, many of which do not require any programming skills. This prototype will greatly help you negotiating with the development team at next steps, and eliminate the related communication risks.

Hire freelancers

Who, where, how?

Freelancer (freelance professional) is a person who is usually self-employed and who is selling creative work or services by the hour, day, job, etc., rather than working on a regular salary basis. Freelancing is predominant in many professions or industries including computer programming, web design, and website development.

The main issue in working with freelancers is to find out who of them can do what you need while having a good reputation and affordable rates. There are many websites such as Elance , Upwork, guru that allow businesses to post jobs, search for freelance professionals, solicit proposals, support collaboration, and execute payments.

Involving freelancers can make sense at certain stages of your web app project for:

helping you with the visual design of a prototype;
CMS-based site development towards MVP deployment;
ongoing assistance in case of significant user interest for MVP that has led to some first-round funding, either collected by crowdsourcing or from an angel investor.

Common species

CMS specialist
Web (UI) designer
User Experience (UX) architect
SEO specialist
PHP/MySQL developer

Pros and cons

External professionals may be good for developing or maintaining particular minor functionality that brings more convenience for the user or improves performance.

However, communication costs for the IT co-founder may be too high. Side projects do not work; even when hiring freelancers, you will have to concentrate on your project and on communication with coworkers as the highest priority most of your time.

If someone can build something for you for a sensible price (perhaps better than you can), it does not make sense to do it yourself. Yet, it is better to avoid using freelancers for developing key modules of your web app or its security-critical parts.

Hire consulting

Saving your time

In a relatively short time, a good web IT consultant can bring you the desired insights and help you to develop a bird's-eye view onto the relevant technology landscape. This is complementary to freelancers, who are usually narrow-focused specialists.

If you and the consultant succeed in developing a common vision of your web app project, you might ask the consultant(s) to review and manage the work of freelancers or of a dedicated developers team.

The consulting firm may have its own web developers or may know freelancers with the appropriate skills to join your project.

Organizing the process

Consulting knows the organizational part of the development work process, and can explain and advise you on what MVP, Kanban, Scrum, Theory of constrains are, and how relevant those can be for your projects.

Consulting will usually communicate time estimates for the project milestones as if those are completely new to implement. However, in reality there is no way to predict the time for work steps if they are not a repetition of what has been done in other projects.

Consulting can usually explain and help with the necessary steps of the financing- or fundraising process for your startup.

Overheads and risks

Consulting is expensive because it rarely assigns a single person to a project. You will have to pay daily rates for two or more consultants over significant time periods.

Consulting will usually suggest people that it knows/employs, not necessary those having the best possible skills needed for your team.

Development time estimates have little to do with the actual development of something new. You may find yourself paying for the pre-coded functionality recycled from some previous consulting projects and served to you as a result of new development effort.

IT co-founder

Roles in a startup

Almost all successful startups had two co-founders and a team. The co-founders are carrying/translating the big picture to the team consisting of engineers and professionals in various fields.

Vision-founder - is a carrier of the how to change the world idea, an entrepreneur who formulates and communicates the business idea, is responsible for prototyping, marketing, advertising, funding, assessing and hiring the non-technical team members.
Tech-founder - is a carrier of the think different technology idea, an entrepreneur with a clear vision on how to technically implement the business idea, responsible for the organization of development process, the choice of the technologies to be used, the assessment and hiring of members of the engineering team.
Team (of non-founders) - dedicated professionals in their own fields of expertize (can be minor shareholders). Team members working closely with the vision-founder: UX, UI designers, SEO and marketing specialists. Team members working closely with the tech-founder: front-end and back-end developers and engineers with various skills.

Tech-founder is a rare species in managerial landscape. It is relatively easy to find dedicated professionals for the engineering team, but it may take months if not years to find a tech-founder with a big picture view and the abilities for setting up and organizing the technical development process.

Who is IT co-founder?

The rule of thumb is that an IT tech-founder is a true multi-talent with 70% or more coding skills of any member of the engineering team. In other words, the IT co-founder should be able to code all project parts alone (even if it takes longer); the code will work, and it will be at least at 70% quality level as if a team of dedicated professionals were coding.

Criteria of success

The vision-founder's business idea is merely a moon-shot if there is no tech-founder who can properly and promptly implement it.

Experienced vision-founders know that the startup success ultimately relies on its implementation, so the largest fraction of start-up shares may be held by the tech-founder. The vision-founders easily leverage their slightly minor shares percentage by generating new ideas and developing other startups in parallel, often with other tech-founders and teams.

Even if the vision-founder is struggling with finding the tech-founder, it does not mean that his business development duties (prototyping, marketing, advertising, investor search, assessment and hiring of non-technical team members) should be postponed.

Full agile team

What is it?

The startup founder's success in attracting venture capital may let the tech-founder hire professionals and organize them into an agile team to work efficiently. This approach has strong connections with the lean startup concept.

Success of the agile software development team depends on the process organization according to the Agile Manifesto principles:

Customer satisfaction by rapid delivery of useful software
Welcome changing requirements, even late in development
Working software is delivered frequently (weeks rather than months)
Close, daily cooperation between business people and developers
Projects are built around motivated individuals, who should be trusted
Face-to-face conversation is the best form of communication (co-location)
Working software is the principal measure of progress
Sustainable development, able to maintain a constant pace
Continuous attention to technical excellence and good design
Simplicity — the art of maximizing the amount of work not done — is essential
Self-organizing teams
Regular adaptation to changing circumstances

Why take care?

A simple and effective agile development methodology such as Scrum breaks the overall task into small iterations (sprints) with minimal planning, not directly involving long-term planning. Each iteration (one to four weeks) involves a cross-functional team working in all functions: planning, requirements analysis, design, coding, unit testing, and acceptance testing.

At the end of the iteration, a working product is demonstrated to stakeholders. Multiple iterations might be required to release a product or new features of it.

Small steps are easier to achieve! Agile methods can foster psychologically a very pleasing and enjoyable atmosphere: the whole team has a feeling of success when the sprint is completed.

Words of caution

It may be hard to find good people and assemble an agile team; time and money expenses may be exorbitant. When hiring people via employment agencies, the tech-founder must count with 5-10 rotations on each team position within 2-5 years.

In planning, avoid fixing time, resources, and scope at the same time. Attempts to simultaneously fix all three constituents in a project are shown by the project management triangle to be intractable. In agile development of high-quality products, the scope is usually left to remain variable.

Avoid the scrum master acting as a contributor; the scrum master's role is to facilitate the whole process. Avoid adding stories to a sprint in progress: if there is an urgent user story then it has to be planned into the next sprint.

Multiple teams

One or many teams?

If your startup grows into a load-heavy or a feature-complex web service, the small agile team may become insufficient to keep up with the growth. The dilemma in this case is: to increase the team size or to break down the project so that two or more small teams work in parallel.

Another dimension of the problem is related to mission-critical parts of the project that have not yet been implemented. Does it make sense to engage two teams working in parallel on the same mission-critical sub-project (they should not know details of other team work, of course)?

Based on dedicated studies, there are good arguments that the optimum team size for building medium sized information systems (average 60'000 equivalent lines of source code) is 3 to 7 persons.

Why small teams?

Studies done by QSM consultancy indicate that small teams are dramatically more efficient than larger teams. To complete projects of ca. 100'000 lines of source code, large teams (~32 people) took on average 8.92 months, while small teams (~4 people) took 9.12 months.

Completing the project just a week sooner with the large team results in exorbitant costs: at $10'000 per person-month, the large teams would have spent $1.8M (178 p.-m.) while the small teams only spent $245k (24.5 p.-m.). Also, the defect rate for large teams was five times greater than for small teams. Defects consume time in discovery, documentation, and repair.

How can small teams be so more efficient than large teams? Communication and coordination overhead rises dramatically with team size. In the worst possible case where everyone on the project needs to communicate and coordinate with everyone else, the cost of this effort rises as the square of the number of people in the team.

Optimal size: How small?

The development effort statistics show that larger teams translate into exponentially more effort and cost. The most cost effective strategy is having the smallest teams; the exponential effort increase occurs when the team size is 9 or more people. There are common-sense reasons for the optimal team size of 5 plus-minus two people:

provides some protection against the loss of a key person;
individual performance is not overcome by group dynamics;
probably close to optimum in building motivation and cohesion;
minimum human communication complexity among team members;
no significant management overhead.

When planning a web development project, think hard about the optimum size and number of teams because it will have a significant impact on the overall timing and result.

Wireframing

UX design

Designing of web apps is a challenge when trying to simplify the complexities, which can be a chaotic and frustrating experience. There may be lack of opinions, or no obviously correct solution in sight. Sometimes, the vision can be so ambiguous that it is not clear what the product is supposed to be.

The best defense against such frustration is a well-defined UX (user experience) design process - a feasible way to solve design problems in a logical order.

The stages of a typical web app UX design process include research (of users, features); information architecture (task flow diagrams; wireframes); visual design (graphics, mockups); and delivery (of assets and specifications in form of a prototype).

Research

Mature software designers, developers, and managers know that research time is a necessary part, the way to kick off the UX design process. More than one round of research may be needed. It is essential to start off by getting answers to several key questions:

Who is going to use this software or site?
What tasks does the user wish to accomplish?
What does the maker of the software or site wish to accomplish?
What technology will be used?
Are there any limitations to consider?
Why would the public use your software or site over another?
What is the content needed to support the user in accomplishing their goals?

Finding the answers to such questions may require a competitive analysis to ensure that your product has the right features, or of simply interviewing those who know who the expected end users will be. Other research techniques include focus groups, user surveys, stakeholder interviews, personas and user profiles, contextual inquiries, heuristic evaluations, etc.

Flow charts and wireframes

Research should provide enough information to map out a flow chart diagram of the tasks the users wish to accomplish when using your web app. The objectives of this information architecture stage are:

create a high-level map of your web site/app;
map out the tasks found on each page or screen;
define the content required to support each task;
test your designs, refine your design solutions;
document the UX patterns.

If you work on a complex web app, it is absolutely critical to first map out the task flow and interactions that the user will face when attempting to complete a task. Creation of a holistic task flow diagram or site map of the product should be one of your primary concerns.

Once you and other stakeholders have agreed upon to proceed with the task flow diagram, it is time to move on to the wireframing stage.

A wireframe is the basic blueprint that illustrates the core form and function found on a single screen of your web page or application. The collection of these wireframes should give a comprehensive skeletal view of the entire product. The fidelity and detail of these wireframes will improve, as they are refined several times.

Prototyping

Usability testing

The web app UX design process, started from research and information architecture stages as considered in the previous stub page, continues with the usability inspection and usability testing at each of the following stages of visual design (graphics, mockups) and delivery (of assets and specifications in form of a prototype).

If you wait to test web app designs until after they have been converted into mockups or fully developed prototype, there may be very little you can do to change the core functionality. Therefore, wireframes should be inspected by stakeholders and tested with angel users before proceeding to next stages. Some commonly used, effective wireframing techniques are:

reality mapping
site map diagrams
persona-based task flow diagrams
screenshot interaction maps
paper prototypes.

Visual design

Once everyone agrees upon the proposed task flow, navigation, and general page layout, the visual design stage begins. This is a transition from wireframes to static mockups, created using the graphic/illustration design software such as open-source GIMP , Inkscape and Blender , or proprietary Photoshop , Illustrator , Premiere + After Effects , etc.

Mockups created at this point should portray a pixel-perfect representation of the final front-end of your web app. All contents and graphics should be defined and put in place, as well as animations, transitions, and interactive features.

When the same designer creates wireframes and visual design, it can be easier to refine wireframes to a higher level of fidelity. Content changes at this stage are common. Text and graphics will be explored and updated, as the mockups are refined. However, regarding additional features and functionality changes, it can be difficult to step back to the wireframe stage once you have started producing mockups.

Documentation and prototype

The delivery stage of UX design process can take place once your content was developed and the project stakeholders approved mockups. This stage breaks down into the following tasks:

choosing the prototype implementation technology (use dedicated software, code directly with an UI library, etc.);
creating the clickable dynamic prototype;
optimizing the graphics for use on the website;
creating specification documents that help the developers build what was prototyped;
reviewing the completed prototype to verify that it matches UI design and UX architecture.

Creation and documentation tasks are much facilitated by the prototyping software such as Axure RP , Balsamiq , Macaw , Sketch, Dreamweaver / Fireworks / Muse . The last UX review task is by far the most difficult. There is likely to be some significant perception discrepancy between the static mockup designs and the developed clickable prototype. This issue has actually led to a new IT career path called a UX developer. It is for that rare person who has an eye for design plus the experience with prototyping software/libraries, and can efficiently communicate with front-end engineers regarding doable solutions.

Development

What and why

Web app development is the process of implementation of the required documented functionality and prototype into a front-end connected to a back-end. The choice of technologies and tools depends on the web app type. There is essential difference between CMS and non-CMS-based (custom-coded) development. You have to decide which line to follow as early as possible.

CMS provides a core back-end of application functionality, either integral ( WordPress ) or modular ( Drupal ). Adding a standard solution stack ( XAMPP ) consisting of database, script interpreter, and web server - all available as separate software packages - is sufficient to create a fully-functional development environment. Hence, to develop a CMS-based web app is rather a configuration task than a coding effort. The dedicated functionality modules can be plugged in from the plugin ecosystem (WordPress), or the whole app needs to be configured from multiple CMS modules right from the beginning (Drupal).

For a custom-coded web app, an appropriate combination of programming languages and frameworks must be selected. When coding within a framework, you learn merely the framework itself. By coding in core languages (pure or with corresponding extension languages), you learn the art of thinking as a coder, which opens up the opportunity of utilizing the actual problem solving, community recipes, and best coding practices.

Methodology

In case of a custom-coded web app, it is of advantage to make use of software development methodologies.

The choice of methodology depends on resources and time constrains. There are two complementary mainstreams: Lean and Agile, with some confusion about the difference between them.

In fact, both share the same principle of short development iterations, and many Agile practices are borrowed from Lean thinking. In essence, Lean is used to help build and define a marketable product. Agile provides the means to achieve this in a software development process.

There are preferred methodologies to plan, administer, and organize work into small, manageable pieces that can be completed by a cross-functional team:

Extreme programming (XP) - a set of agile engineering practices for programming projects, i.e. a software development methodology.
Scrum - agile process tool (a project management methodology) that limits the amount of time allowed accomplishing a particular amount of work. When/if applied to programming projects, Scrum teams usually implement XP engineering practices with some minor modifications.
Kanban - agile process tool (a project management methodology) that limits the amount of ongoing work allowed.

Philosophies

CMS-based development is all about WYSIWYG (what you see is what you get) philosophy. Hence, CMS rapid development offers immediate testing and requires no documentation.

Efficient non-CMS-based web app development relies upon extreme programming (XP) software development methodology with a project-specific mix of:

project management methodologies ( Kanban, Scrum);
programming principles ( DRY, KISS, YAGNI);
programming paradigms ( functional, OOP/ SOLID, etc.);
software development processes ( FDD, TDD, and non-technical project stakeholder-friendly ( BDD);
complexity-taming software design approaches ( DDD, MDA).

Additionally, teams can organize for pair programming - when two programmers work as a pair together on one workstation - to optimize development and to speed up the new team members onboarding, i.e. to gain even more agile advantages over the single-person coding.

Deployment

The simplest one?

A web server permanently visible on the Internet must have a static IP address. You cannot easily offer a web service from your office or home PC that typically has a dynamic IP address. Core business of the ISP is to sell static IPv4 addresses. A CMS-based website could be easily served from a usual desktop PC placed and forgotten in your cellar, if that PC would have a static IP address.

For growing websites with increasing user loads, an expandable server infrastructure is needed. It is much cheaper to rent a server or server hours from an ISP than to invest in hardware and education on how to securely and efficiently operate it. Big ISPs operate CDNs that deliver static content (images, scripts, media) even faster because of geographical proximity to users.

The first choice to do is between subscription-based hosting ( shared hosting, VPS, dedicated server) offered by the most small and mid-sized ISPs, and the usage-based hosting (shared cloud, cloud VPS, cloud server, etc.) offered by large ISP, i.e. cloud service providers. The former is billed upon a fixed rate basis regardless whether the server resources are used or not. The latter is billed on a variable rate basis for the consumed resources only.

Both approaches to billing for hosting resources come in three service models to choose from: SaaS, PaaS, and IaaS. Apart from offering full or partial maintenance of the server administration layer needed for IaaS, the SaaS and PaaS service models represent typical vendor lock-ins.

The SaaS deployment is typical for website builders ( Shopify.com , SquareSpace.com , Wix.com , WordPress.com by Automattic , etc.) and CMS-based web apps. Any shared hosting plans with pre-installed CMS by ISP ( Bluehost, GoDaddy, etc.) or shared cloud CMS as-a-service ( vip.WordPress.com) represent how the majority of websites on the Internet are deployed.

More flexibility?

The PaaS deployment is typical for CMS-based and custom-coded web apps with rapid development project constraints.

The BaaS deployment - filling the gap between SaaS and PaaS by focusing on back-end cloud computing - is often used for custom-coded startup MVPs.

In the case of a CMS-based website, the ISP offers a combination of managed virtual server with CMS-PaaS in form of a pre-configured web hosting control panel ( cPanel , Plesk , Webmin ) wich can automatically install/manage a CMS (WordPress, Joomla, Drupal, etc.) of choice.

In the case of a custom-coded startup MVP, the BaaS offerings significantly speed up the development by exposing a fully functional back-end API ( Firebase , Kinvey, Parse, etc.).

The PaaS cloud offerings for custom-coded web apps ( AWS Elastic Beanstalk , Cloud Foundry , Deis/ Dokku, Google App Engine , Heroku , OpenShift , etc.) are attractive for teams without system/network administration expertise.

Load scalable?

The two forms of deployment - pure IaaS (virtual cloud servers) and Microservices (software-container-based PaaS/IaaS) - are the most flexible, load scalable, cost-efficient, but also demanding in terms of server administration, provisioning, and orchestration. Either approach can be a natural choice when your custom-coded MVP proves its viability and thus deserves further development. It is up to the tech co-founder to decide which SOA pattern to follow: to apply the microservices ( Akana , Giant Swarm, Jelastic , etc.) blueprint, or to design it with pure IaaS provisioning / orchestration.

Common IaaS offerings from small and mid-sized ISPs include unmanaged private servers (virtual VPS, dedicated DPS, etc.). Such servers are not designed for load scalability, even if the ISP tries to claim the opposite by offering a limited semi-automatic vertical scaling option. However, since most CMS-based projects can only be scaled up, such IaaS products are perfect for CMS performance tuning at no additional cost of operation.

Cloud IaaS vendors ( Amazon EC2 , DigitalOcean , Google Compute Engine , HP Cloud , IBM Cloud , Joyent Cloud , Linode , Microsoft Azure , Rackspace Cloud , ScaleMatrix, etc.) are the de-facto standard if load scalability is crucial. Furthermore, mastering deployment automation and service orchestration will significantly lower various project risks (vendor, political, performance related) if your web app is deployed on multiple IaaS clouds simultaneously.

UX-testing

Usability testing

is a technique used in user-centered interaction design to evaluate a product by testing it on users. For web app development, this is an irreplaceable practice, as it gives direct input on how real persons use the app.

Simply gathering opinions on a web app operation is market research or qualitative research rather than usability testing, which usually involves a systematic observation under controlled conditions to determine how easily people can use the product.

Setting up a usability test involves a carefully created scenario, or realistic situation, wherein the person performs a list of tasks using the product being tested, while observers watch and take notes. For a web app, this is a remote asynchronous process supported by technologies such as e-mailing campaign, web conferencing and video conferencing.

A/B testing

or split testing is an approach to web UX design, which aims to identify changes to web pages that increase or maximize an outcome of interest (e.g., click-through rate (CTR) for a banner advertisement).

Two versions (A and B) are compared, identical except for one variation that might impact a user's behavior. Version A might be the currently used one (control), while version B is modified in some respect (treatment). Multivariate testing is similar to A/B testing, but with more than two variants of user interaction tested at the same time.

For example, on an e-commerce website, the purchase funnel typically needs A/B testing, as even marginal improvements in drop-off rates can represent a significant gain in sales. Significant improvements can be seen through testing elements such as copy text, layouts, images and colors.

Heuristic evaluation

Jakob Nielsen popularized the concept of heuristic evaluation by using numerous small usability tests (with only five test subjects each) at various stages of the development process. The argument was, once two or three people are totally confused by the web page, little is gained by watching more people suffer through the same flawed design.

Although this approach was criticized from different viewpoints, Nielsen's point was that testing with five users, fixing the problems they uncover, and then testing the revised web site with five different users is a better use of limited resources than running a single usability test with 10 users.

UX testing is an integral part of the overall approach to user experience that encompasses all aspects of the end-user's interaction with the company, its services, and its products. Details and definitions can be found on the pages of NN/g .

Improvement

Inevitable change

Three of Lehman's laws of software evolution apply to the software performing some useful real-world activity:

Continuing change: Systems that are used must change, or else automatically become less useful.
Increasing complexity: Through changes, the structure of a system becomes ever more complex, and more resources are required to simplify it.
Continuing Growth: the functional content of the system must be continually increased to maintain user satisfaction over its lifetime.

These and other Lehman's laws explain why the development of a useful web app never stops after the first development - deployment - UX-testing cycle, and such cycles need to be repeated many times in a continuous, sustainable and consistent fashion in response to new challenges and demands.

From MDE to UCD

Technically, the next cycle of web app improvement involves the conversion of the list of specifications via UX-testing, and the addition of new features via coding.

This cannot be done with MDE software design approaches (DDD or MDA) only. With both DDD and MDA, the whole user interaction and experience comes as an afterthought within the overall design and development. Hence, at the point of initial web app success, the forthcoming improvement should evolve around the user experience. This is where the UCD principles come into play.

These practices can be embedded into a sequence of UX Research - Planning - Developing - Testing - Deploying automation.

TOC and TRIZ

Successful continuous improvement can be facilitated by systematic company building and people management, supported by the ideas of TOC (theory of constraints), as well as by persistent innovation according to TRIZ - the theory of resolution of invention-related tasks.

Got a great startup idea? You may need help of a

CONGINEER

consult + co-found + co-engineer

Your idea may need a web app which is

What keeps users on?

Why this is important?

What to avoid:

Website design

MAYA principle

Typical pitfalls

Develop, operate, sell

No middle-cost solution

How to reduce costs?

layout and content viewing

Client-side detection

RWD limitations:

delivery of layout and content

Server-side decisions

AWD limitations:

Slim and performant

Good reasons for a slim code base:

Common pitfalls

Optimized for speed

Why to optimize?

Way to(o) fast...

Tune and expand

Crucial decisions

What web hosting?

Find in web app

Find your app on web

Static or dynamic?

Types of data

Need for storage

Data structures

Major quality pillar

Major cost driver

Stay organized with:

Best practices + testing

Web-aware security

Comments

What type of web app do you foresee?

is a web log

Types of blogs:

Technologies

Thinking of Wikipedia?

What wiki lets you do:

Technology

Online newspaper

Online magazine

News aggregator

Small business website

How to get it right

Some hints

What is this?

Main types

Limits and hints

The future of education

Main flavors:

Biased-content trap

LBS

Importance

Technologies

Thin client

Trends

Technology

SNS

Main SNS types

Concerns

Browser game

Technologies

Modern tools

Instant messaging

Web chat

Implementation

Web syndication

Adaptive presentation

Content syndication

Technically, a modern web app requires