Lesson 14 - Create Interactive Website
Lesson 14 - Create Interactive Website
Objectives:
1. Identify functional and non-functional requirements.
2. Select JavaScript framework.
3. Add requirements using FURPS+ checklist.
Content:
The main difference between these two requirements lies in their scope and purpose. Functional
requirements specify the features of the system, while non-functional requirements outline the way in
which it should work.
Source: Google.com
The main difference between functional and non-functional requirements of ecommerce websites lies in
their scope and purpose.
Functional requirements (FRs) are the what of your website. It is all about the functions and core
operations of your e-store that enable a user to take action on the website. They can be implemented as
a single website feature and form the basis of the whole software development process.
age 2 of 21
Functional requirements for a website examples: Add the following product filtering features to our home
improvement webstore: price, popularity, power rate (Watt), heating area (m2), and usage (bathroom,
kitchen, etc.).
Non-functional requirements (NFRs) are the how of your website. Named quality attributes of a system,
they form user experience and imply some global, abstract expectations from the product. Non-
functional requirements of online shopping systems may derive from a sum of functional requirements
for an ecommerce website and are implemented as a sum of web features.
Non-functional requirements for online shopping website examples: Products should be easily found and
have an appealing display on the website.
Interplay of functional and non-functional requirements: many FRs make up one NFR.
It’s not recommended to save on ecommerce functional requirements that form the core of the project,
so don’t be afraid to see many of them in your website specification document. But beware of adding up
the non-functional requirements which will drive up the cost of your project.
If you can afford that — great! Your store will be a customer magnet delivering optimal user experience.
If, on the other hand, you’re tight on budget, consider adding only the essential non-functional
requirements that will satisfy your users. Ideally, you’ll want to find the golden mean between the
functional and non-functional requirements for an ecommerce website and balance them bearing in
mind your business goals and objectives.
Functional and non-functional requirements are the basis of larger instructions issued to a development
agency at the beginning of the project. Learn all the tips and tricks on how to write a website
requirements specification document in our related guide.
Responsible for the online shopping system behavior, functional requirements can be very different
depending on one’s business needs and niche. For instance, fashion websites usually allow some product
attributes to be selected by the customer (e.g., color, size, etc.); travel companies may require a chatbot
providing assistance to the user; luxury goods and jewelry online businesses need a zooming feature on a
product detail page (PDP).
age 3 of 21
Here are a few must-haves sets of functional requirements applicable to all ecommerce websites.
List all third-party software to be integrated via API that should be included in ecommerce website. These
might be the new systems you wish to add or the existing ones you’re satisfied with and using now.
This requirement concerns both systems streamlining business operations (like ERP, CRM, PIM) and
flexible payment gateways for your customers. Specifying the number of third-party integrations will
make your ecommerce architecture structured and ready for your business scaling in the future.
FR #1 examples:
The website shall be integrated with Odoo ERP system and Svea payment solutions.
PayPal Direct, PayPal Plus, and Amazon Pay will be the priority payment in the store.
FR #2: Mobile-friendliness
It’s no secret that mobile responsive apps bring more traffic to the website. According to Statista, the
number of customer conversions on mobile devices has also reached those on desktops in the US. So
investing into a mobile-responsive feature of your website can earn you more than a few bucks, plus loyal
customers shopping from the comfort of their sofas.
Study your target audience and inquire about their devices. Specify how the position of the essential
buttons and options on webpages should change for a better shopping experience (insider tip: place the
checkout button within your customer’s thumb’s reach, for most people prefer surfing the internet with
age 4 of 21
only one hand from mobile devices). Your mobile-first functional requirement should be precise so as not
to confuse the developers.
FR #2 examples:
PDP should be adapted to the screens of the Apple iPhone 6s and above.
My store shall support voice search of products on mobile via Alexa Mobile Accessory (AMA) Kit (note:
this is one of Amazon functional requirements).
Your PDP will include various product characteristics, and the development agency should know about
them to implement the corresponding features. Will the customer be able to choose a product size and
color only? Do you use videos on a PDP? Will some product attributes appear in a menu (as in the mega-
menu)? If possible, write out a list of all product attributes your website should have and hand it over to
your developers.
Product attributes on our client’s PDP: size, dress length, quantity, and color. Source: Amsale.
FR #3 examples:
Your functional requirements for an online shopping system should specify how the orders are processed
in your store and whether this functionality should be optimized. In particular, indicate whether you want
the customer to register to make a purchase or enable guest checkout. List the order statuses you wish to
have (visible both to the customer and the store admin). Explain how you want to manage B2B orders. In
short, try to be as detailed about your order and checkout flow functionalities as possible.
This is also the part where you mention your discount policy and the promo codes you provide in your
shopping store, if any. Whether they are to be handled at checkout or directly on the PDP, you should
include a separate functional requirement for them.
FR #4 examples:
The website shall show the following order statuses: confirmed, processing, shipped, returned.
After the customer is registered on the website, they should receive one extra year of warranty on the
purchased order.
In ecommerce, online presence goes alongside that of social media. Allowing a user to share your
website’s content on socials leads to higher brand awareness and brings you closer to your existing and
potential customers. Research your target audience and identify their favorite social media networks. Let
your consumers share products, blog posts, and inspirational pictures by adding a corresponding button
to your website.
FR #5 examples:
Our product info should be shared on Facebook, Instagram, Pinterest, and LinkedIn.
User comments from Facebook should appear on the product detail page on the “Customer Reviews”
page.
As mentioned earlier, non-functional requirements articulate the quality attributes of the website that
build positive user experience and optimal website performance. The Bible of business analysts
— BABOK — distinguishes between NFRs for merchants (e.g. maintainability, scalability, reusability) and
for users (e.g. usability, security, accessibility). In our opinion, they are all equally important at different
stages of your business journey: as your store scales, your non-functional requirements may add up.
Here are some basic types of non-functional requirements for ecommerce websites that should make it
to the website specification document of all digital businesses.
No matter the size of your business, you want your website to be intuitive and easy-to-use. It takes about
0.05 seconds for users to figure out if your website is worth their time and attention. So, you’ll definitely
age 6 of 21
want to work on your homepage design, calls-to-action, and easy checkout to get past those milliseconds
of doom. Website usability is also defined by
how easily a user can achieve their goal in a single page visit;
how quickly they perform the tasks in the store;
how memorable and intuitive the design is;
number and time of errors users make.
NFR #1 examples:
A customer should easily find the right product for them, understand what problems it solves, and make
a purchase without contacting us.
No multistep checkout: users must reach the “add to cart” button in one step from PDP.
Security is paramount while dealing with monetary transactions and sensitive data. Simple software
requirements for ecommerce website like SSL certification and data privacy policy will instill trust into
your website and convert the customers into your brand advocates. It is also about different admin roles
allowing you to control who can create, see, copy, change, or delete information. Depending on your
business location, security also means complying with the customer data protection rules (case in point:
GDPR in Europe).
There are many factors at play when it comes to security; specifying this non-functional requirement
means taking the first step to ecommerce fraud prevention.
NFR #2 examples:
Only the system data administrator can assign roles and change access permissions to the system.
The website must be resilient to any kind of attacks, including DDoS and XSS attacks.
If your goal is increasing your website traffic, performance should be the priority NFR in your specification
document. This NFR is often found in briefs from large enterprises or websites with legacy architecture:
they want their e-stores to load fast no matter the number of integrations and sales seasons.
Set up the speed benchmark, a maximum number of SKUs to be added, or any other performance
indicator suitable to your business. Don’t include third-party system delivery time, though; your
developers can’t do much if a certain business operation depends on an API call to another database.
NFR #3 example: The website’s homepage should load in less than 4 seconds on iOS 10+, Safari on 4G.
It’s widely known that the tricky part of planning a business budget is accounting for the operational costs
of business maintenance. Striving to make the website maintainable from the initial development phase
means cutting the time and cost to identify and resolve the system faults in the future. As saddening as it
age 7 of 21
may seem, there’s no escape from future issues and you can see many cues on how to maintain an
ecommerce website. But your task is to make the system easy-to-maintain right from its launch.
NFR #4 example: Because we are looking to grow, the website shall remove all the back-end complexities
for in-house engineers to make changes to the system in the future.
If you’re looking into a future-proof solution, scalability should be your take. This requirement defines
how the website can grow and expand its functionality without affecting its performance. You should be
able to add more memory, servers, or disc space to complete more transactions on your website.
On the server-side, you might want to add localization features in case you plan to enter new markets
and sell products internationally. Overall, this NFR accounts for painless business expansion and has both
hardware and software implications.
NFR #5 examples:
Our main goal for the next two years is internationalization, so the website shall have multiple store
views for each country we’re selling to.
The store shall expand to support 500k+ SKUs on a single server without a negative impact on the website
load speed.
So, you’ve decided on a few functional and non-functional requirements for an ecommerce website; now
what? You present your needs and views on the project on paper!
When a client contacts us at Elogic for ecommerce development services, we like to issue a brief. It helps
our clients make up their minds about their ecommerce requirements list and draw us a clear picture of
what they’d like to see. Similar to RFP, a brief is organized in a spreadsheet with category-specific
questions in tabs. Depending on the type of the project (website development from scratch, replat
forming, custom module development, etc.), the brief will include various questions aiming to reveal
different business needs.
age 8 of 21
A JavaScript framework offers a collection of pre-written JavaScript code libraries and functions for
routine tasks involved in web development. This way, developers don’t have to write code for common
and repetitive tasks again and again.
Modern JavaScript frameworks support component-based architecture, where we break the UI into
reusable and self-contained components.
Today, there are numerous JavaScript frameworks available in the market. When it comes to front-end
JavaScript frameworks, some of the big players in the market are Ext JS, React, Angular and Vue. These
frameworks offer their own set of features to facilitate front-end development.
For instance, Ext JS is a well-known JavaScript framework that offers a range of pre-built and
customizable UI components. It’s also recognized for its cross-browser and cross-platform compatibility
and next-level security.
React is known for its component-based architecture, virtual document object model (DOM), and strong
community support.
Angular is widely used for building single-page applications with features like two-way data binding,
dependency injection and TypeScript support.
Finally, Vue is a progressive javascript framework known for its easy integration and simplicity.
Even in 2024, these frameworks continue to rule the Javascript frameworks market with regular updates
and improved features.
Project Requirements
Consider your project requirements, such as the web application’s size, complexity, scalability and
performance requirements. This will help you select the best JavaScript framework for your specific
project.
For example, if you’re developing an enterprise-grade web or mobile application involving complex tasks
and scalability requirements, you should choose a JavaScript framework like Ext JS that is designed
specifically for building enterprise-level web or mobile apps.
However, if you’re creating single-page web applications, Angular is a good option with data binding and
cross-platform compatibility.
In the highly competitive modern software development world, it’s crucial to create high-performance
web applications faster.
For this reason, you need to choose an easy-to-use and easy-to-integrate framework. Otherwise, you’ll
spend more time learning the framework instead of creating web apps faster.
A popular JavaScript library has extensive documentation and additional learning resources. These
resources provide details regarding the features, capabilities, and implementation of the framework.
This make the integration quick and easy.
Moreover, it’s best to assess if the framework you’re choosing has a big developer community. This way,
you can ask for help regarding anything related to the framework from other experienced developers.
The best JavaScript framework is designed to work efficiently in different kinds of web apps and handle
data seamlessly.
For example, Ext JS offers a high-performance JS grid that can process millions of records efficiently
without affecting the app’s performance, improving user experience.
A good JavaScript framework comes with most of the necessary tools developers need to create feature-
rich, responsive, and interactive user interfaces.
However, you might need additional libraries for data processing, rich text editing, DOM manipulation,
and more. Thus, you should assess if the framework supports integration with other libraries.
Moreover, you should also check if the framework has its own ecosystem of extensions that allow you to
access additional valuable features beyond the framework’s scope.
age 11 of 21
Long-term Viability
Assessing the framework’s long-term viability is another crucial factor to consider to ensure your app
keeps functioning efficiently.
Ext JS
Ext JS is a robust front-end Javascript framework for faster and more efficient enterprise-level web and
mobile app development. The popular framework is used by 100,00+ enterprises worldwide, including
Apple, Canon, Americal Airlines, and Cisco, to develop highly functional and secure apps.
Ext JS offers more than 140 pre-built, high-performance UI components. All the components are
highly customizable and fully tested. These components are designed to work together
seamlessly in any app.
The JavaScript framework also supports a wide range of charts, area, pie, bar and column
charts, and D3 visualizations, such as treemaps and heatmaps, for creating data-intensive web
apps.
Ext JS offers one of the fastest and most efficient JS data grids. The robust grid is pre-tested on a
range of browsers and platforms and is capable of handling millions of records efficiently
without compromising performance.
The framework supports both MVC and MVVM (Model-View-ViewModel) architectures.
Ext JS offers a single codebase for cross-platform app development. It enables you to deliver
excellent user experience across desktops, smartphones, and tablets.
Ext JS comes with detailed documentation that provides all the information you need to
understand the framework’s features, capabilities and functionality.
Sencha also has a Resource Center with numerous whitepapers, webinars, ebooks, and
supporting videos.
Advantages
Great UI components
One single library
Cross-Browser Compatibility
Layout system
Security comes out of the box.
Disadvantages
Angular JS
Advantages
Open source
Easy to extend
Easy to test
Great MVC architecture
age 13 of 21
Supported by Google
No Pre-requisite knowledge required
Easily customizable
The framework facilitates the development of single-page applications (SPA)
Disadvantages
Less secure
Not supported on outdated browsers
Inflexible
Memory leakage
Uses regular DOM instead of virtual DOM, which affects loading time.
React JS
Advantages
Virtual DOM
Reusable Components
Huge developer community
Easier to Learn
React Developer Tools
One-Way Data Flow
React Native for mobile applications
Flux controls
Disadvantages
Vue.js
Released in 2014, Vue is used for developing cross-platform single-
page applications (SPA).
Advantages
age 14 of 21
Lightweight
User-friendly
Beginner-friendly
Reusable
Ease of use
Virtual DOM
Easy Integration
Customization
Disadvantages
Ext JS is one of the leading and most secure JS frameworks for developing high-performance web and
mobile apps. It offers advanced built-in security features, enabling developers to implement powerful
authentication mechanisms.
Ext JS proves to be more cost-effective than open-source frameworks in the long run. For example,
research by Dimensional Research shows Ext JS users have saved 50% on front-end development, 75%
on annual app maintenance, and 75% on cross-browser and cross-platform development.
Numerous enterprises use Ext JS and its components due to its impressive features and capabilities.
Here are some examples of successful customer stories:
A renowned Argentinian hospital utilized Ext JS for an Oncology and Home System, and here is what
their lead JavaScript developer, Maximiliano Yusso, said about Ext JS and its grid:
“The object-oriented nature of the Ext JS framework and the well-laid-out class structure makes the app
versatile and easily scalable. There are no issues with performance since the Ext JS grid and other
components work seamlessly with big data.”
Kaseware, an investigative platform to combat security threats, utilized Ext JS to design a stunning
platform and achieve high-level security in their app development. And here is what the CEO & Founder
of Kaseware, Dorian Deligeorges said about Ext JS:
“With Ext JS, we were able to better enforce security within our code base. If you are building an Angular
app, you are constantly searching for a widget for this and a widget for that. You don’t know if they are
age 15 of 21
maintained or if there is any embedded malware or nefarious code in them. Using Ext JS, we rarely had
to go outside the framework, and our platform has some really complex security and functionality
requirements. “
Scheuring AG, a Switzerland-based consulting practice service and software development company,
used Sencha Ext JS. According to Heinz Scheuring:
“The Sencha grid is the key element of resSolution and hyperManager. Ext JS and its other components
have really helped us refine our business approach.” –
Have you ever wondered how to document non-functional requirements? Would you like to know what
FURPS+ is? In this text you will learn what FURPS+ is and how to use it to document non-functional
requirements.
What is FURPS+?
Functionality
Usability
Reliability
Performance
Supportability
‘+’ – other requirements and constraints
FURPS+ is designed to help you categorize your requirements and verify the completeness of your
requirements.
In the following, I will show how I use FURPS+ to categorize non-functional requirements.
age 16 of 21
Figure 1. FURPS+
(F)unctionality
Functionality defines functional requirements. It also takes into account requirements that are not
represented by specific use cases and apply to the entire system, for example, requirements related to
security, logging or auditing.
Audit
Licensing
Printing
Reporting
Security
o Confidentiality (e.g. only authorized users have access to the data)
o Integrity (e.g. data is consistent and correct)
o Availability (e.g. data is available all the time)
o
Debugging
Scheduling
Examples of non-functional requirements from the Functionality category are:
(U)sability
Usability defines the requirements related to ensuring that the product is understandable, easy to learn
and use.
(R)eliability
Reliability defines the ability of a product to perform a function (action) under specified conditions for a
specified period of time or a specified number of operations.
Availability
Accuracy
Recoverability
(P)erformance
age 18 of 21
Performance is the degree to which a system or component performs its designated functions within
specified processing time and throughput constraints.
(S)upportability
Supportability defines the ability of the system to be operated during the entire life cycle of the system.
Adaptability
Auditability
Configurability (e.g. the system is compatible with previous versions)
Configurability
Installability
Testability
Maintainability
Compatibility
Localization (e.g. the system supports the Polish and English languages)
Separated test environments will be prepared to carry out functional, integration and
acceptance tests
The system will be monitorable via the monitoring tool
Special dashboards will be prepared in the monitoring tool
+ (PLUS)
"+" identifies other requirements and constraints that define the design, implementation, interfaces, or
physical elements of the solution.
Design & implementation (e.g. regarding the need to use a PostgreSQL relational database)
Interface (e.g. the SOAP standard will be used for integration between the systems)
Physical elements (e.g. may relate to the selection of specific servers)
Legal information (e.g. regarding copyright)
Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://elogic.co/blog/functional-and-non-functional-requirements-for-ecommerce-websites/
#:~:text=The%20main%20difference%20between%20these,in%20which%20it%20should%20work.
https://www.sencha.com/blog/how-to-choose-the-best-javascript-frameworks-in-2023/
https://marcinziemek.com/blog/content/articles/8/article_en.html
eBook:
age 20 of 21
Assessment 14-1:
Written Test
Test I: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.
1. _____________________________________
2. _____________________________________
3. _____________________________________
4. _____________________________________
5. _____________________________________
6. _____________________________________
1. _____________________________________
2. _____________________________________
3. _____________________________________
4. _____________________________________