THE DZONE GUIDE TO

Web
Development
Frameworks & Responsive Design
VOLU ME I I

B R OUG HT TO YOU IN PA RT NERSHIP WITH

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DEAR READE R , TABLE OF CONTE NTS

A few years ago, I put on a blindfold and made a 3 Executive Summary
BY JORDAN BAKER
prediction. I looked at the future of web development and
pictured a few clear winners in the space, dominating the 4 Key Research Findings
BY G. RYAN SPAIN
landscape and deciding how we all do web dev. Fact is, I
was fundamentally wrong. As we’re approaching 2018, we 6 Using TypeScript with Redux
still see new technologies and frameworks emerging daily, BY ADAM BARD

and older ones are evolving to adapt to the most recent 9 Checklist: Implementing Effective User Password Management:
trends. The tech industry leaders are contributing back to Do’s and Don’ts
BY GABRIELE TOMASSETTI
the community with exciting new ideas and technology
almost daily, and everyone seems pretty focused on 12 A View to Vue.js
BY RAYMOND CAMDEN
delivering the best experience possible to the end user. It’s
a vibrant market, and while some argue that it’s lost focus 14 5 Dev Practices to Ensure Stellar Website Introduction
and generated a lot of noise, I tend to disagree. BY AMIR ROZENBERG

16 Infographic: The Flavors of JavaScript

I once read an analogy that made a lot of sense (I am
18 Defenses vs. Injection Attacks
deeply sorry, but I can’t remember the source). Think of a BY CHRIS LAMB
hardware store and picture the hammers section. You will
22 Using Kotlin with Ktor to Create Web Apps
find hammers of all colors, shapes, and materials. There are BY SIMON WIRTZ
hammers with plastic handles and wooden handles. Then
25 Diving Deeper into Web Development
you pick whether you want your hammer to be yellow, blue,
big, small, double-sided, stainless steel, forged barrel, etc., 26 Executive Insights on the Current and Future State of Web
etc. There’s just a world of possibilities and combinations Application Development
BY TOM SMITH
for a tool with a seemingly simple function: hit stuff!
28 Web Development Solutions Directory
The truth is, every tool out there is trying to solve 34 Glossary
a specific set of problems or embrace a different
methodology or work model. It is the developer’s job to PRODUCTION BUSINESS EDITORIAL
figure out which one is the best for a particular task, and Chris Smith Rick Ross Caitlin Candelmo
DIRECTOR OF PRODUCTION CEO DIRECTOR OF CONTENT AND
it is DZone’s job to identify and bring you the best content COMMUNITY

Andre Powell Matt Schmidt

about them. Welcome to the second edition of the DZone SR. PRODUCTION COORDINATOR PRESIDENT Matt Werner
PUBLICATIONS COORDINATOR
Web Development Guide: Frameworks and Tools. G. Ryan Spain Jesse Davis
PRODUCTION PUBLICATIONS EDITOR EVP Michael Tharrington
CONTENT AND COMMUNITY MANAGER

We have some exciting research findings, proving that Ashley Slate SALES
DESIGN DIRECTOR Kara Phelps
Matt O’Brian CONTENT AND COMMUNITY MANAGER
the web is evolving fast, and web developers are quick to
Billy Davis DIRECTOR OF BUSINESS DEV.

adopt new technologies. We cover some ground around PRODUCTION ASSISSTANT

Alex Crafts Mike Gates
SR. CONTENT COORDINATOR
DIRECTOR OF MAJOR ACCOUNTS
security and show you how to ensure your web application MARKETING
Jim Howard Sarah Davis
looks and behaves awesomely on every platform. We Kellet Atkinson CONTENT COORDINATOR
DIRECTOR OF MARKETING SR ACCOUNT EXECUTIVE
introduce you to Kotlin for web development using the Jim Dyer Tom Smith
Lauren Curatola RESEARCH ANALYST
ACCOUNT EXECUTIVE
Ktor asynchronous web framework, and to Vue.js, a MARKETING SPECIALIST

Kristen Pagàn Andrew Barker Jordan Baker

JavaScript library that seems to be the perfect solution ACCOUNT EXECUTIVE CONTENT COORDINATOR
MARKETING SPECIALIST
when all you need is to sprinkle some dynamism on an Brian Anderson Anne Marie Glen
Natalie Iannello ACCOUNT EXECUTIVE CONTENT COORDINATOR
otherwise static webpage. We show you how to use MARKETING SPECIALIST

TypeScript with Redux if you want to introduce type Miranda Casey Chris Brumfield
SALES MANAGER
MARKETING SPECIALIST
safety on your application. And much, much more. Ana Jones
Julian Morris ACCOUNT MANAGER
MARKETING SPECIALIST
Tom Martin
I hope you enjoy reading the content as much as I did, and ACCOUNT MANAGER

that you find our research useful. I’ll just leave a final word of
Want your solution to be featured in coming guides? Special thanks to our
appreciation to our sponsors and contributors and let you Please contact [email protected] for submission information. topic experts, Zone
dive deep into yet another excellent guide. Happy reading. Leaders, trusted DZone
Like to contribute content to coming guides? Most Valuable Bloggers,
Please contact [email protected] for consideration. and dedicated users
BY HERNANI CEQUEIRA for all their help and
Interested in becoming a dzone research partner? feedback in making this
DISTINGUISHED ENGINEER, DZONE Please contact [email protected] for information. guide a great success.

2 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

IS CHROME EATING THE WORLD?

Executive DATA 95% of respondents stated they actively develop

for Chrome (the same number as last year), while every
other major browser saw a decrease in active development:

Summary Firefox (77% - 72%), IE (51% - 40%), Safari (38%- 32%).

IMPLICATIONS Chrome’s and Firefox’s developer tools,

such as the super handy JavaScript console, make them
BY JORDAN BAKER browsers that are really geared toward helping web
CONTENT COORDINATOR, DZONE developers create better applications and sites. The fact
that Chrome is developed for rather than on, however, also
speaks to a growing community of Chrome users outside
of the development industry. While reasons for preferences
As software continues to take over the world,
are hard to quantify, the fact that Chrome is backed by one
every organization is creating web applications
of the biggest companies in the world, with huge marketing
to interact with their user base. Take this rapid departments, could be one reason for its success.
expansion of web development, and add to it a
proliferation of languages, frameworks, and tools, RECOMMENDATIONS If you’ve never played around with

and you get a thriving and growing community the Chrome developer tools, check them out and become
familiar with the ways they can help in the development
of web developers. We asked 406 members of this
process. Mozilla also has an excellent reputation for
community for their thoughts on the field and the
encouraging open source development, offering an
suite of technologies available. expansive set of documentation and their own developer
browser in which devs can edit and write HTML, CSS, and
JavaScript code. But, while Chrome and Mozilla remain
ANGULAR IS THE DOMINANT CLIENT-SIDE
great options for developers, other browsers remain in
FRAMEWORK
wide use outside of IT, and should thus be tested against
DATA Angular currently sits atop the frameworks hierarchy,
during the development process.
with 79% of respondents using it to create applications,
compared to 64% last year, and 62% of respondents said
they’re interested in using it further or learning more about A SHIFT TOWARD NOSQL DATABASES
this framework. Additionally, TypeScript is one of the most DATA MySQL and Oracle DB both saw decreased use since
favored “flavors” of JavaScript right now, with a 52% use rate last year’s survey, with MySQL falling from a 61% use rate
among respondents, up from 32% last year. This growth in 2016 to 57% in 2017, and Oracle DB from 38% to 32%. In
among Angular users sits in stark opposition to React, which opposition to this decrease, NoSQL databases MongoDB
has stayed static year-over-year in terms of user growth, and Redis increased in popularity, from a 42% - 46% and
coming in at 30% over our last two community surveys. 19% - 24% use rate, respectively.

IMPLICATIONS While the Google team did a great job with IMPLICATIONS As more companies and organizations,
Angular, the main reason for its resounding success could even those outside the development space, create web
be that it is the only true framework designed to create full applications to interact with users, their data is growing.
web applications. Out of its main competitors, React and This requires a more easily scalable solution, such as
Backbone (though often included under the “frameworks” NoSQL databases. NoSQL is also more agile due to its more
category) are in fact libraries, and Vue.js, while it can dynamic, schema-less data model, and is probably seeing
be used as a framework, was designed to create User a boon from the growth of Agile development processes.
Interfaces. TypeScript seems to be growing in popularity Redis in particular is known as a light-weight solution,
due to its being a superset of JavaScript, allowing which can second as a messaging queue, a helpful feature
developers to make improvements, such as type safety, to for web developers working with UI/UX.
the most widely-used web development language today.
RECOMMENDATIONS While NoSQL databases are
RECOMMENDATIONS Become familiar with the Angular not perfect, they are currently the best option for web
framework, and the TypeScript iteration of the JavaScript developers, as they allow for agility and scalability in
language. Backed by Google, this framework will only development. If your team is not yet using a non-relational
continue to improve and become easier to use, and database, testing out options such as MongoDB and Redis
developers should take advantage. should be on your radar.

3 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

Key
• 18% of respondents work at organizations
with more than 10,000 employees; 18% work
at organizations between 1,000 and 10,000

Research
employees; and 22% work at organizations
between 100 and 1,000 employees.

• 88% develop web applications or services; 46%

Findings
develop enterprise business apps; and 24%
develop native mobile applications.

FRAMEWORKS
BY G . R YA N S PA I N The Angular JavaScript framework was the most popular
P R O D U C T I O N C O O R D I N ATO R , DZO N E in our 2016 Web Development survey, and this year its
popularity has only increased. While use of Angular 1
DEMOGRAPHICS decreased slightly from 59% to 57%, use of Angular 2

406 software professionals completed DZone’s increased from 33% to 46%. Overall, respondents who have
used some form of Angular increased from 64% in 2016
2017 Web Development survey. Respondent
to 79% this year. React, the next most popular framework
demographics are as follows:
behind the Angulars, remained unchanged year over year
• 40% of respondents identify as developers at 30%. Vue, on the other hand, increased dramatically

or engineers, 19% identify as developer team from results in 2016, going from 3% to 10%. React, while

leads, and 15% identify as software architects. its response was static from last year, is the framework
respondents have the most interest in trying, with 58% of
• The average respondent has 12 years of responses (up 8% from last year). Angular 2 had a minor
experience as an IT professional. 60% of boost in interest as well, increasing from 50% to 54% since
respondents have 10 years of experience or last year’s survey. On average, respondents have used 1.633

more; 21% have 20 years or more. client-side frameworks for web development.

• 37% of respondents work at companies LANGUAGES

headquartered in Europe; 29% work in JavaScript, HTML/CSS, and Java were by far the most used
companies headquartered in North America. languages among survey respondents. 84% of respondents

 Which browsers do you actively develop for?  Which databases are you using with your web apps?

95% Google Chrome 57% MySQL

72% Mozilla Firefox 46% MongoDB

39% PostgreSQL
40% Internet Explorer
32% SQL Server
32% Safari
32% Oracle DB

27% Edge
24% Redis

9% Opera 14% MariaDB

1% Tor 8% Other

1% Other 7% IBM DB2

0 20 40 60 80 100 0 10 20 30 40 50 60

4 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

said they use JavaScript for web development, 78% said mobile devices, the most popular individual devices were
they use HTML/CSS, and 72% said they use Java. 54% of the iPhone 7 (37%), the iPhone 6 and the Samsung Galaxy
respondents said they use all three of these, and only 5% of s7 (both 33%). 46% of respondents said they target at least
respondents said they don’t use any. Next up were PHP and one iPhone, and 42% target at least one Samsung phone;
Python, with 22% and 21% respectively. When asked about 53% said they target at least one mobile device.
what languages respondents’ organizations used, results
were nearly identical, but PHP (29%) and Python (27%) BACKEND AND BEHIND THE SCENES
were occasionally recognized as languages used for web The most popular databases behind web applications
development elsewhere in a respondent’s organization. among respondents were MySQL (57%), MongoDB (46%),

ASP.NET received some recognition as well, being used and PostgreSQL (39%). For web servers, respondents

in 23% of respondents’ companies, while only 15% of preferred Apache Tomcat (57%) and Apache Web Server

respondents said they use it themselves. Respondents (54%), with third place going to NGINX (41%). Respondents
who need to push real-time/streaming data from their
said they use an average of 3.44 different languages when
server overwhelmingly said they use the WebSocket API
developing for the web, and said their organizations use
(71%) over other methods like HTTP streaming (35%) and
an average of 3.77. For JavaScript, most respondents said
polling (27%); HTTP streaming did gain a 9% increase from
they use ECMAScript (62%) or TypeScript (52%), with only
the 2016 results, while WebSocket dropped 6%. For web
14% of respondents answering that they have used third-
app testing, Selenium was heavily used (56%), followed by
place CoffeeScript.
Jasmine (26%) and PhantomJS (25%). npm (63%) dominated
over package managers Bower (29%—a 7% drop from 2016)
BROWSERS AND DEVICES and Webpack (28%—an 8% increase).
Google Chrome remains the browser most actively
developed for—95% of respondents said they develop with
Google’s browser particularly in mind (compared to 96%  Which languages are you currently building for
last year). Mozilla Firefox and Internet Explorer, the next web apps?
two most popular browsers to target, had more significant
90
decreases from last year’s responses, with Firefox JavaScript
dropping from 77% to 72%, and IE dropping from 51% to 84
80 HTML/CSS
40%. Even with fewer respondents actively developing for
78 Java
Internet Explorer, the increase in responses for Microsoft
Edge was underwhelming, changing from 25% to 27%. For 72

60
 Do you work more in the front-end or back-end of
your web application?

11%
Front-end 11% 40

38% Back-end Ajax

32
PHP
Python
20 22 22
ASP.NET

15 Ruby
Other
Full Stack 52% 8 7
Go

7
0

5 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

QUICK VIEW

Using TypeScript
01 Even though Redux comes with its
own annotations, adding your own
can help restrict possible issues.

02 Besides preventing errors, adding

detailed type annotations can
help make your editor tooling

with Redux
more effective.

03 Establishing a consistent type

model and applying it to your Redux
reducers will help make multi-store
setups type-safe and easy.

04 Using unions to define valid

messages and annotating the
store.dispatch function at the
point of usage provides end-to-end
BY ADAM BARD type safety for Redux messages.
SENIOR DEVELOPER, TAPSTREAM

Redux is a library that provides a way to manage The interesting part here is the reducer function counter.

application state in one place. Not every application The signature of this function is critical: it accepts a state (of
any shape), an action (which must have a “type” field), and
needs help with this, but for many applications,
returns a state of the same shape as the original. Get this
it can simplify access to this global state without
wrong, and your program can break in subtle ways.
causing incidental complexity by restricting the ways
it can be updated and accessed. If only there was some way to enforce this signature to
prevent this.
Redux is all well and good by itself, but using
We can start by defining the shape of our state:
TypeScript, we can add type annotations to greatly
increase the type-safety of Redux-based React type AppState = number

apps. In this article we will explore some sample

Extremely boring stuff. Next, we’ll define our action, which
annotations and develop a standard boilerplate for
is a bit more interesting.
use with a single Redux store, and then expand this
solution to cover a multi-store Redux configuration, Redux considers any object with a “type” key a valid action,
demonstrating along the way the benefits of this but we can do much better than that by restricting our
actions down to only ones we expect:
added type safety when writing reducers and
dispatching actions.
interface IncrementAction {
type: ‘INCREMENT’
DUMMY-PROOFING REDUX }
Let’s look at Redux’s “Getting Started” example:
interface DecrementAction {
type: ‘DECREMENT’
import { createStore } from ‘Redux’ }
function counter(state = 0, action) {
type AppAction = IncrementAction | DecrementAction
switch (action.type) {
case ‘INCREMENT’:
return state + 1
That | is the secret sauce of this whole article, and represents
case ‘DECREMENT’:
return state - 1 one of my favorite TypeScript features: union types. You
default: can read it as “or”: The action is either an Increment or a
return state
} Decrement.
}
Now, we need simply to apply these types to our function
const store = createStore(counter)
signature:

6 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

So, we’ll need to import AppAction from the store. Luckily,

function counter(state: AppState = 0, action: AppAction):
AppState { TypeScript can deal with this sort of partial circular import.
switch (action.type) {
case ‘INCREMENT’:
return state + 1
case ‘DECREMENT’: // reducers/counter.ts
return state - 1 import { AppAction } from ‘../store’
default:
return state export interface State {
} count: number
} }

export const blankState = () => ({

Besides annotating the arguments and return values, we’ve count: 0
not had to change the function’s implementation at all; })
TypeScript’s type inference does an excellent job checking
interface IncrementAction {
the above without requiring extra annotations. However, if
type: ‘INCREMENT’
we do something like misspell “INCREMENT”, or forget to
}
return the state in the default: case, the type checker will
tell us right away, because we’ve provided it a list of the only interface DecrementAction {
acceptable values for action.type. type: ‘DECREMENT’
}
Unfortunately, we don’t automatically get this benefit when
export type Action = IncrementAction | DecrementAction
calling store.dispatch — by default, it will (again) accept any
object with a “type” key. There are two ways around this: export function reducer(state: State = blankState(),
action: AppAction): State {
1) You can manually annotate store.dispatch when you call it: switch (action.type) {
case ‘INCREMENT’:
store.dispatch<AppAction>({type: ‘INCREMENT’}) return { count: state.count + 1}
case ‘DECREMENT’:
2) You can create your own Dispatch type and apply it to return { count: state.count - 1}
default:
store.dispatch via an intermediate variable:
return state
}
type AppDispatch = (action: AppAction) => AppAction
}
Now, in store.ts, we’ll connect this sub-reducer to our
const dispatch: AppDispatch = store.dispatch
dispatch({type: ‘INCREMENT’}) global store:
import { createStore, combineReducers } from ‘Redux’
import * as counter from ‘./reducers/counter’
This latter method is particularly useful when using the
connect utility from react-Redux. export type AppState = {
counter: counter.State
}
MULTI-STORE APPLICATIONS
The above is well and good, but eventually most applications export type AppAction = counter.Action
will find themselves separating AppState and the reducer into
multiple reducers. Each of these reducers will have to provide: export type AppDispatch = (action: AppAction) => AppAction

•• Its own state const blankAppState = (): AppState => ({

counter: counter.blankState()
•• Its own actions
})
•• Its own reducer function
const store = createStore(
I also like to include a fourth item: a function returning a combineReducers({
counter: counter.reducer
blank state. This will come in handy frequently.
}),
blankAppState()
Let’s move our counter reducer into its own file (I usually put
)
these all together in a reducers/directory). (Let’s also change
the state to store the count as a key, just to make it more
From this, it should be clear how we might extend our store
typical of a real-life Redux state object).
with additional reducers. Imagine that we wrote a “todos”
One more detail: to be correctly typed, the reducer function reducer as well. After connecting it to our store, our store.ts
should accept any action, not just the ones from its reducer. file might look like:

7 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

TYPING REACT-REDUX
With our state and dispatch types, we can make a React
integration that much more type-safe as well.
Redux is all well and good by itself,
When writing a component with providers — as we do when

but using TypeScript, we can add type we use react-Redux’s connect — I like to split its props into
parts based on who provides them.

annotations to greatly increase the

import * as React from ‘react’

type-safety of Redux-based React apps. interface StateProps {

count: number
}

interface DispatchProps {
increment: () => void
decrement: () => void
}
import { createStore, combineReducers } from ‘Redux’
import * as counter from ‘./reducers/counter’ class MyComponent extends React.PureComponent<StateProps &
import * as todos from ‘./reducers/todos’ DispatchProps, {}> {
// ...
type AppState = { }
counter: counter.State, This will let us annotate the functions that we’ll be
todos: todos.State providing to connect:
} import { connect } from ‘react-Redux’

type AppAction = counter.Action | todos.Action import { AppState, AppDispatch } from ‘./store’

const blankAppState = (): AppState => ({ const MyComponentWrapper = connect(

counter: counter.blankState(), (state: AppState): StateProps => ({
todos: todos.blankState() count: state.counter.count
}) }),
(dispatch: AppDispatch): DispatchProps => ({
const store = createStore( increment: () => dispatch({type: ‘INCREMENT’}),
combineReducers({ decrement: () => dispatch({type: ‘DECREMENT’}),
counter: counter.reducer, })
todos: todos.reducer )(MyComponent)
}),
blankAppState()
) Let’s dissect the above:
•• The state provider is annotated to accept AppState and
So, what have we gained? return StateProps, giving us that extra type-checking.

Firstly, our reducers are now strongly typed, right down to •• The dispatch provider is similarly annotated to
their accepted actions — no sign of an any type anywhere, accept AppDispatch and return DispatchProps. Using
nor is it possible to forget to return the state. AppDispatch ensures that our calls to dispatch can only
be made with valid messages — if we misspell a type or
In addition, dispatch functions will only accept valid actions miss an argument, the compiler (or our editor tooling)
(provided that they have been annotated as described above). will catch it and tell us.
I find that this obviates the need for a separate action-
generating function as many Redux guides recommend. We SUMMARY
could, of course, provide such a function: Although Redux comes with its own types for the above, they
lean heavily on TypeScript’s any type. By providing our own
const incrementAction = (): IncrementAction => ({ implementations of the State, Action, and Dispatch types we
type: ‘INCREMENT’ can gain vastly increased type safety.
}

ADAM BARD is a software developer and author from Victoria,

...but, since actions are type-checked for validity anyhow BC, Canada, with decades of experience making websites (and
thanks to our efforts, it becomes little extra effort to other applications). He presently develops for Tapstream, freelances
from adambard.com, and is currently working on laterforreddit.com,

construct the action at the time that you dispatch it. Your
among others. You can find him on Twitter @adambard. 
editor will catch any errors as you code!

8 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

 Implementing Effective User
Password Management:
Do’s and Don’ts BY GABRIELE TOMASSETTI
FREELANCE SOF T WARE ENGINEER

MINIMUM LENGTH REQUIREMENT... ALLOW USERS TO PASTE PASSWORDS.

8 characters. Longer passwords are generally better, but forcing your Even in the confirm password field. Some developers block pasting based on

users to have a password longer than 8 characters is dangerous. If it is too the idea that practicing typing a password facilitates remembering it. It does

long users will bypass them with repeatable patterns like toolongtoolong. not work and it is annoying to people that use password managers.

Furthermore, most users will choose a password of the minimum length,

making easier to crack them.

BE CAREFUL WHEN ALLOWING TO BYPASS A PASSWORD.
You must provide a method to bypass a password, in the case a user forgets
...AND A MAXIMUM LENGTH. their own password. The issue is that attackers can always take advantage of
it. So, if you have a weak alternative to a password, you are always exposed.
...Is at least 64 characters. You should allow users to use long passwords,
For example, avoid security questions, instead use another authenticated
if they want. The NIST suggests a length of at least 64 characters. Also,
channel, like an email address or a mobile phone.
be clear about it, do not silently truncate passwords that are longer
than your limit.

USE GRADUAL AUTHENTICATION.

DO NOT PUT RESTRICTIONS ON CHARACTERS CLASSES. There is no foolproof way to protect against an attacker that has the right
password, but is effectively the wrong person. However, you can contain the
You should not require passwords to have different classes (e.g., an
damage by limiting the actions of a user identified by an anomalous authen-
uppercase letter, a digit, etc.). People use predictable substitution rules tication. An anomalous authentication could be one coming from a different
and patterns such as P@ssw0rD. However, you should also not prohibit country than usual. A limitation could be forcing the user to pass a CAPTCHA.
their use. You should also warn the user through an authenticated channel (e.g. email)
in the case of an anomalous authentication.

BLOCK PASSWORD REUSE AND COMMON PASSWORDS.

ENCOURAGE TWO-FACTOR AUTHENTICATION.
Attackers will try to use passwords exposed in data breaches with their
associated emails. Basically, if a breach contains an account with email@ Two-factor authentication is effective in protecting user accounts. It is also
example.com and password shd30a@s#89, they will test whether that considered cumbersome by many and that is why it is not popular. A middle
combination works on your service. The simplest way to check exposed ground could be to encourage the use of two-factor authentication only when
passwords is with the Pwned Password API of Have I Been Pwned. doing important actions, such as buying an item or publishing an article.

9 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

10 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

SPONSORED OPINION DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

Most cite the key advantages of a single code base and consistent user

Why is 33
experience across platforms. These advantages also create a multiplier
effect on testing:

1. Platform matrix (web and mobile)

the Answer?
2. Visual validation across CSS break points, and

3. Differing web and mobile navigation options

Selenium is well suited to address most of these challenges – high volume

parallel execution. Most teams look for extensions to visual validation and
The strategy pillars for testing responsive websites are clear. a new strategy for enabling efficient analysis of test results able to connect
to the defect management tool of choice. The Achilles heel undermining
1. Automate (Duh)
confidence is a reliable lab offering supporting real mobile devices and web
2. Use the open source Selenium framework, or one based on it browsers matched to user traffic.

3. Use traffic analytics to determine appropriate lab size So why is 33 the answer? Thirty-three is
4. Extend functional test automation to include visual verification the number of web platforms required to
across break points achieve 80% market coverage. But think
about applying a “current, beta, last”
5. Embrace TDD and then progressively test every build, every approach across five browser platforms, and
merge, every night don’t forget about mobile devices. So, full
6. Deliver fast feedback coverage requires adding in thirty-two mobile
devices. Turns out the answer isn’t 33, it is 55!
While much has been written about the need to automate and the de
facto automation framework of choice — Selenium — more work is WRITTEN BY CARLO CADET
needed to define guidelines on building the right strategy. DIRECTOR OF PRODUCT MARKETING, PERFECTO

Continuous Quality Lab

Beauty Retailer Focuses on FLAWLESS User Experiences for Doubling EComm Revenue

CATEGORY NEW RELEASES OPEN SOURCE STRENGTHS

Automated Testing Platform Every three weeks No • Automate More: The Forrester Wave™
Mobile Front-End Test Automation Tools
LEADER
CASE STUDY
One leading beauty retailer is revamping their strategy to double eCommerce revenue by • Optimize DevOps pipelines by enabling
focusing on delivering flawless experiences. Continuous Testing of web, mobile, and IoT
apps
Software development retooled their app quality strategy to accelerate delivering new
features faster. The team partnered with Perfecto to accelerate development velocity • One cloud-based lab to test every client,
without more budget. embedded within the delivery toolchain

The team grew test automation by 50%. By implementing more automation and parallel • Analyze fast, fix fast: provide developers
execution, regression duration dropped from 160 hours to less than 12 hours, a 94% acceleration. the artifacts to reproduce and trouble shoot
issues
Next up was scaling browser coverage. Testing coverage went from the latest version of
two browsers using one Windows OS to supporting all five-leading browsers running the • Continuous testing in production:
current, beta, and one prior version, now totaling 36 browsers, a 17x improvement. Proactively monitor the real customer
experience
This acceleration enabled shorter sprints and shifted testing earlier. Regression testing
was previously executed once, maybe twice per sprint. Today, the team is receiving faster
NOTABLE CUSTOMERS
feedback with smoke tests executed every build and full nightly regression runs.
• Elevate • Paychex
Partnering with Perfecto resulted in a faster time-to-market and better quality at the same budget.
• R&V • ING
The team is well on its way towards delivering flawless user experiences. • Verizon • Kaiser Permanente

WEBSITE perfectomobile.com TWITTER @perfectomobile BLOG blog.perfectomobile.com

11 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

QUICK VIEW

01 Vue is an easy to use,

lightweight framework for
working with JavaScript.

A View to Vue.js
02 Vue provides a simple and
intuitive syntax for data binding
and dynamic expressions.

03 While easy to use, it scales

up from simple use cases to
more complex single page
applications.

BY RAYMOND CAMDEN
DEVELOPER ADVOCATE, IBM

If you’re like me, you’ve likely been bombarded over First, a bit of HTML. (The HTML has been simplified to save space,
the past few years by Angular and React content. including removing the script tag to load Vue itself.)

Every other blog entry, conference session, or keynote

seemed to be focused on either of the two. With that <div id=”app”>
<input v-model=”name”><br/>
context in mind, I can still remember the first time I My name is {{name}}
saw a “Vue.js” talk listed on a conference schedule. </div>

While I certainly do not pretend to know everything,

And now the JavaScript:
at least when it comes to buzzwords and the such,
I was pretty sure I had heard of most of the popular let app = new Vue({
el:’#app’,
front-end frameworks out there and this was one I had data:{
decidedly not heard of. name:’Ray’
}
})
Vue.js is not new. It was first released in 2014 by its
creator, Evan You. But it’s almost as if talk about the
Let’s tackle the JavaScript first. It begins by creating a new instance
framework has been drowned out by all the attention
of Vue. You can basically think of this as a Vue app, but rather
to Angular, and even more so, React. If you’ve avoided simplified. I bind it to the DOM with the el value and then specify
looking at Vue.js because of this, you’ve made a some default data. In this case a name with the value of Ray.
mistake, and I’d like to explain why.
On the HTML side, note that I’ve used a div with “app” as way
SO WHAT IS IT? of connecting it to the Vue instance made earlier. There are two
Vue is an incredibly simple framework that can scale up with special things going on here. The attribute v-model in the input
your needs. If you aren’t building an app but instead simply tag binds the value in the form to the variable name defined in
need a bit of JavaScript on a page, Vue is the perfect tool to the Vue instance. Changing the input field will update the data
make that JavaScript easier to manage and more powerful. I like and vice versa. The next line shows a simple example of the
Angular, but sometimes I don’t want an “app” — I don’t want template syntax. In this case, {{name}} is automatically replaced
a large set of dependencies and a build “process” just for one with the value of name.
simple page. While Vue projects can certainly grow into complex
Run this code (which you can do via the CodePen here and you’ll
applications, the default is to start small and simple and I really
see that as you type, the text after “My name is” is updated
appreciate that.
automatically.
At the basic level, Vue handles two-way binding between your
view (form fields and the such) and your code as well as the TAKING IT TO THE NEXT LEVEL ...
rendering of data. In the abstract, that’s almost too vague to make Ok, that’s possibly not that exciting, but let’s kick it up a notch.
sense of, so let’s look at a simple example. Let’s build a simple application that searches the iTunes API. It

12 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

will have a search field, a button to initiate searching, and then a

place to render the results. We’ll start with the HTML:

<div id=”app”>
<input v-model=”term” type=”search”>
<button @click=”search”>Search</button>
</p>
<div v-for=”result in results”>
<img :src=”result.artworkUrl100”>
<b>Artist:</b> {{result.artistName}}<br/>
<b>Track:</b> {{result.trackName}}<br/>
<br clear=”left”>
</div>
</div>

The first input field uses a similar syntax to the first example,
using v-model to tell Vue, “Connect this value to a variable,
‘term’.” The button tag uses a shortcut “@click” to assign a click
handler to the button. You’ll see the code assigned to that in
a moment. Of course, there’s a lot more to the template rendering syntax,
conditionals for example. The general form would look like this:
The fun part is the result render. By using v-for in the div, we’ve
said, “Repeat this div for every item in the results array and assign <div v-if=”somethingIsCool”>Cool.</div>

a variable, result, to the individual item.” Inside the div, we use

Another way to conditionally add something to DOM is via CSS
{{ … }} tokens to render the data. The image uses another
binding:
shorthand, :src, to assign the src value to the result. Now let’s
switch to the code. <div v-bind:class=”{ coolItem:somethingIsCool }”></div>

let app = new Vue({ In this example, when the value of somethingIsCool is truthy, the
el:’#app’, coolItem is added as a class value for the div.
data:{
term:’’, Again, the idea here is to provide simple shortcuts for common
results:[]
use cases. To me, it feels like I’ve got the power of Angular with
},
nearly zero overhead.
methods:{
search:function() {
fetch(`https://itunes.apple.com/ WHERE NEXT?
search?term=${encodeURIComponent(this. Obviously, the first place you’ll want to start is the
term)}&limit=10&media=music`) Vue homepage. Once there, start looking at the
.then(res => res.json()) Guide as it walks you through the basics into the
.then(res => {
more complex tutorials. Then follow up with this
this.results = res.results;
incredible five-part guide to Vue by Sarah Drasner.
});
Chrome and Firefox uses can also find a devtools
} extension to help development. Mouse over that
} “Ecosystem” dropdown on the Vue page for a good
}) list of other related resources as well (see right).

My suggestion is to simply give it a whirl. At the

It starts off much the same as the last example, but note the
end of the day, actually using a framework tells
new data item: results. We set the initial result to an empty
you pretty quickly if it’s something that’s going
array. Next, we’ve defined a new block, methods, that will store
to work well for you. The primary reason I don’t
functions related to our app. In this case, a function called search.
use React is that it simply didn’t gel with me — it
It then uses the Fetch API (not part of Vue, it’s a modern XHR
certainly didn’t lack for features. However, Vue.js
replacement) to hit the iTunes API. The result is in JSON, which is
did, and I think it might with you too!
parsed and then simply assigned back to the array defined earlier.

And that’s it. No creating long strings of HTML to inject into the RAYMOND CAMDEN is a developer advocate for IBM. His
HTML, no event handlers defined by hand. Vue basically made work focuses on LoopBack, serverless, hybrid mobile development,
Node.js, HTML5, and web standards in general. He’s a published
shortcuts for all of the things we commonly do when working 
author and presents at conferences and user groups on a variety of
with JavaScript and HTML and made it as easy as pie. You can run 
topics. Raymond can be reached at his blog, on Twitter, or via email.
this online yourself here. Here’s an example of it running:

13 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

QUICK VIEW

5 Dev Practices to 01 Website development now

has to accommodate various
digital channels, forcing teams
to shift more activities including

Ensure Stellar Website

testing left.

02 Agile and DevOps maturity

requires adoption of new tools
and practices (dealing with Big

Introduction
Data, ability to debug quickly,
BDD, and ATDD).

03 Coverage optimization for

digital platforms is an ongoing
challenge that requires strategic
thinking.

BY AMIR ROZENBERG
DIRECTOR OF PRODUCT MANAGEMENT, PERFECTO MOBILE

People have been creating websites for the longest post-commit to get fast feedback. This is the best, cheapest, and
safest time to find a defect: the code is still fresh in the developers’
time. Some may say “HTML is HTML”. Well, not
head, it won’t take long to fix, and there’s no added risk by
exactly: websites are now rendered on many different
undoing code that was built on top of this recent code. A high-
types of devices, browsers, form factors etc. New quality website is the end goal of the entire team, regardless if you
technologies enable HTML5 to offer content and are part of the dev, design, test, or ops team.
services according to the user’s context (location,
It’s not to say traditional QA activities would all move into the
time etc.). At the same hands of developers. Load testing, for example, may not be
time, development cycles suitable for a development environment, but the more agile the
accelerate and sprints are quality activities can realistically be, the better.

shrinking as organizations To make this change, a few things need to happen:

adopt agile practices.
•• Small scale test activities need to be automated and provide
This article will offer best
rapid value: if a developer committed code, some tests need
practices to improve team to be run to provide fast feedback. That process needs to
efficiency and deliver high- be automated.
quality products, while
•• Developers can adopt developer-oriented tests and tools: for
maintaining velocity and example, unit tests with XCTest/Espresso, getting network
Figure 1: Suboptimal rendering
competitive edge. on a mobile screen performance insight using HAR files, or conducting single-
user performance tests.

EMBRACE QUALITY ACTIVITIES (AS PART OF •• Developers need to learn and see the value delivered,
DEVELOPMENT) otherwise they won’t do it.
We’re increasingly observing the fallacy of the separation between
dev and quality activities. Defects are often found late, anytime •• Taking advantage of the test automation pyramid and
between mid-sprint and production. Developers then spend implementing more API tests at the expense of UI tests is
expensive hours undoing code to correct the issue, creating more a way to reduce testing time while practicing agile testing.
QA work, increasing risk, and eventually jeopardizing the app’s Another modern approach for web dev and testing is to
success. leverage headless browsers for unit testing (i.e. Google’s
puppeteer project).
The way to address this expensive cycle is to expand the
“definition of done” to include some level of code verification. In •• Don’t underestimate the importance of accessibility for
other words, developers need to run a few tests pre-commit and your website. This is becoming a big deal for many reasons,

14 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

including site SEO, adoption, and compliance. Testing for site to reduce
ESSENTIALdependencies,
WEB FAMILY achieve WEB
ENHANCED more, and reduce
FAMILY risk.WEB
EXTENDED ForFAMILY
accessibility is quite hard to automate on mobile devices example, mature agile teams
Chrome Latest/Win 10
take responsibility/ownership
Chrome Beta/Win 7
for
Chrome Latest/Win 8.1
compared to the more mature web testing tools. However,
Chrome Latest/Mac OS Latest Chrome -1/Win 7 Chrome Beta/Win 8.1
the complexity of doing so shouldn’t be an excuse not to do
Firefox Latest/Win 10 Firefox Beta/Win 10 Chrome -1/Win 8.1
it at all.
IE 11/Win 10 Firefox Latest/Win 7 Firefox Latest/Win 8.1
Safari Latest/MacOS Latest Firefox -1/Win 10 Firefox -1/Win 8.1
FOCUS VIGILENTLY Edge Latest/Win 10 Safari Latest/MacOS -1 Firefox Beta/Win 8.1
Assuming we agree that developers pick some quality activities,
Chrome Beta/Win 10 IE 11/Win 7 Safari -1/MacOS Latest
the question becomes, “What’s relevant and vital for developers
Chrome Beta/Win 7 IE 1/Win 8.1 Safari -1/MacOS -1
to work on?” Their time is expensive. One area where they should
Firefox - 1/Win 7 IE 9/Win 7 Firefox Beta/MacOS Latest
not be working is in a lab (maintaining emulators, browsers, or
Chrome -1/Win 10 Chrome -1/MacOS -1 Chrome Beta/MacOS Latest
devices). The effort to maintain a lab can become very time-
Chrome Latest/MacOS -1 IE 8/WIN 7
consuming very quickly: the lab needs updates, care, and
Firefox Beta/WIN 7
attention. A proper lab should provide all the means for coverage,
Total 10 Browser Permutations Total 12 Browser Permutations Total 11 Browser Permutations
automation, fast reporting, etc. The developer should only need
to describe the user flows that are important to test (matching
the code they are developing now) and which devices and the application behavior in production. There are several reasons/
browsers to test those on. Everything else should be automated. motivations to do so, to name a few:

•• With the proliferation of client-side capabilities, the client

FAIL FAST, FAIL EARLY side has an increasingly bigger role in real time incidents,
In the spirit of agility, developers will realize that testing (and and developers are being called to assist. If they are being
failing) early beats failing later. As mentioned earlier, it does called anyway, they might as well own the experience and fix
require investment: (stable) tests need to be written alongside incidents quickly.
the code, and it will take some time for those to run and create
a perspective for the quality of the code committed. However, •• It’s easy to do: with a proper test automation capability, it
the investment is well worth it. Knowing within an hour (or less) is very easy to apply the same or similar test framework to
about a new defect is much better than knowing about it weeks assets in production.
or months later. Even iterating a few times, failing until the right
•• It’s valuable: Not only do coders know (and take pride) or
solution is found, is better.
their code in production, but they can also benchmark the
new build performance against production and improve
ADOPT COVERAGE APPROACH (INCLUDE accordingly.
MOBILE) AND PRIORITIZE
Modern websites are developed and displayed very differently
One of the things to remember is that the website will most
compared to ones developed years ago. Technology (such as
likely be rendered on all kinds of devices, browsers, and form
HTML5) and processes (agile) present new opportunities to
factors. The common approach to handle all of these variations
deliver new functionality earlier and at higher quality and
is to adopt a responsive web design approach: one line of code
functionality to the market. With that comes the challenge
serves many screens, but that’s not easy either. With the same
of reducing defects in production, which risks the end user
code, one needs to offer the right rendering for different device
experience. With proper measures, tools, and perspective,
combinations and manage network connectivity to optimize the
developers can extend their area of responsibility to embed
experience for small and large screens.
quality activities into their daily activities in a way that not only
doesn’t slow them down, but allows them to develop faster, find
The same thinking should be applied to quality activities: they
defects early, and fix them without undoing code and design. For
need to consider a prioritized set of browsers, devices, user flows,
more advanced reading, please refer to Earn Kinsbruner’s ebook,
and environments in which the user is likely to experience. The
10 Test Automation Frameworks for Cross-Browser Testing –
lab should support all of these so the developer can very easily
A Comparison Guide for 2017.
create test scripts to exercise the code in as many scenarios as
possible. The top browsers developers should currently consider
AMIR ROZENBERG is the director of product management,
in their testing are listed in the table on the top right.
responsible for core product strategy at Perfecto Mobile. Amir has
extensive experience in the digital industry with expertise in areas

SHIFT LEFT, SHIFT RIGHT: QUALITY ACROSS including application development, testing, delivery, and monitoring.

THE LIFECYCLE Prior to working at Perfecto Mobile, Amir led the mobile monitoring
Last but not least is the realization that app quality is something practice at Gomez/Compuware, led the founding of Adva Mobile, and
that needs to be a point of focus throughout the life stages of the held leadership positions at Groove Mobile, Nextcode Corp. etc, Amir
commonly writes for DZone, CIO Magazine, and other publications.
app: from design to production. Truly agile dev teams are driving

15 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

 Building web applications used to be relatively simple. You had HTML and CSS — maybe you used Python or vanilla JavaScript — and
probably had MySQL and Apache HTTP on the backend. Now, however, you not only have a plethora of databases, hosting providers,
and servers, but an enormous collection of JavaScript libraries and frameworks. Add to that the choice of testing tools, CDNs, build
script tools...the sheer number of options can be confusing. To sort it out, we surveyed our audience to see what they used the most, and
what use cases they were best suited for. Take a look at the menu and make your own perfect JavaScript sundae.

Recommended JQUERY CDN

Combina�ions
MEAN STACK
Package Management CDNs Part of the jQuery library is the
CDN hosted by Stackpath. Given jQuery's pop-
ularity, 50% of survey respondents use it.
(MongoDB,
ExpressJS, Angular,
node.js)
Tools NPM
GOOGLE HOSTED LIBRARIES
A collection of CDN libraries that can be added to several web
With 63% of members using it, npm frameworks. About 35% of DZone members use them.
JAVA +
SPRING is the most popular package management tool. It
LAMP STACK
(Linux, Apache, is also the default manager for node.js.
MySQL, Python)
ANGULAR
Angular has evolved from NPM SCRIPTS
its origins as just a framework to Even though it's not built to be a
a full platform for building HTML or
JavaScript web apps. It includes templates, dependency
build tool, npm can act as one thanks to npm
Scripts,which are used by 55% of respondents. Build Script
injection, end-to-end tooling, and more. A whopping 79% of
respondents have used some version of Angular.
BACKBONE.JS
Backbone was designed
for single-page application.
GULP.JS Tools
Gulp automates several repetitive web development tasks such as
REACT It has a reputation for being concatenation, and unit testing. 31% of DZone users automate tasks using
React was built by lightweight, and it's only dependent on the underscore.js Gulp.
Facebook to build large web library. 10% of developers use Backbone.js.
apps that can change over
time or in response to a user's VUE
action without reloading the page. 30% of Vue was specifically
DZone members have used React. designed to build user interfaces, and is
easy to integrate into projects with other JavaScript frame- JASMINE
MYSQL
an open source relational data-
base, used by 57% of respondents.
Databases
works. 10% of survey respondents use Vue.js. a lightweight

Frameworks SELENIUM
behavior-driven
development framework
for testing JavaScript. 26% of DZone
It's a core piece of the LAMP
stack and other –AMP stacks.
MONGODB
is a NoSQL document
database that stores
a tool for automating members use it.
web browsers for the data in JSON, BSON, or XML files, used
purposes of automated by 46% of DZone members.
testing. 56% of respondents use it.
Tes�ingTools

Recommended
Combina�ions
B.S.T.
P.M.T
Tes�ing .
    Tools Databa se s

Frameworks
DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

QUICK VIEW

01 Injection attacks are one of the

Defenses vs.
most common ways to exploit
systems.

02 Not enough developers

understand what the common
defenses against these attacks

Injection Attacks
actually do.

03 Learn how filtering,

synchronizer tokens, double
submit cookies, and encrypted
tokens are all used to stop XSS
and CSRF attacks.

BY CHRIS LAMB
CYBER-SECURITY RESEARCH SCIENTIST, SANDIA NATIONAL LABORATORIES

Injection attacks are remarkably common. In fact, defense. Synchronizer tokens are a common defense against

they’re the backbone of most exploits; after all, in order this type of attack today, in many different application
delivery platforms.
to compromise a system, an attacker needs to inject
something into the system that executes. We see this These approaches are common, but still have significant
same pattern in remote code execution exploits, SQL problems. Content filtering is difficult to implement well,
injection, cross-site scripting, request forgery attacks, and leads to both false positive and negative issues. Granted,
many of these implementations today are well designed and
and so on. Most modern development platforms
effective, but they’re not free. Implementing the correct filters
support defenses against these kinds of techniques
takes time, thought, and experience; and processing every
out of the box simply by setting a few configuration submitted input string has a significant computational cost,
parameters. And, the vast majority of developers leave especially at scale. Tagging approaches fortunately tend to
it at that without really understanding what those scale and can be implemented at the application server level,
defenses do. but they also lead to more complexity, require additional
processing, and can be difficult to implement.

Well, we’re going to fix that today. With that in mind, let’s take a look at the different types of
injection attacks and their corresponding attack models to
INPUT FILTERING AND CONTENT MARKING understand how to best craft a defense for each approach.
We can look at these kinds of defenses as falling into two
distinct categories: input filtering or content marking. Content SQL INJECTION AND XSS DEFENSES
filtering involves, well, filtering content. We’ve been using Today, XSS and SQL Injection attacks are highly focused on
these approaches since, roughly, the beginning of time. filtering. This makes a certain amount of sense—both attack
Essentially, this involves scanning all submitted content, and models are the same, though the targets differ.
ensuring that the content contains no potentially harmful
strings, characters, symbols, or other input. We’ve used this
technique to scan submitted data in web applications for SQL
characters, for example, as well as for submitted JavaScript
syntax. The idea is that we can capture submitted SQL or
JavaScript, and by capturing those symbols, we can stop
them from being stored and potentially executed. Content
marking takes a different approach. Here, we somehow flag
all known good content and then check for that marker prior
to execution. This is a common cross-site request forgery Figure 1: shows the attack models of various XSS and SQL injection attacks.

18 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

Figure 1 shows the attack models of various XSS and SQL this approach leads to problems, like using the back button or
Injection attacks. Stored XSS attacks involve injecting content bookmarking a site).
through the application server into the underlying data store,
where the injected script is eventually sent to the target Furthermore, including the token in the URL can lead to

browser. Reflected XSS attacks are usually instigated via some token leaking. URLs are frequently saved in logs and browser

external program, like an email client, chat program, or SMS histories, where they can be accessed by attackers and used to

client that coerces the user to click on a specially-crafted URL circumvent CSRF protections.

with a script payload, which is reflected from an application

Double submit cookies take advantage of the fact that
server back to the client with the trust properties of the
attackers can’t access cookies when crafting CSRF requests
reflecting server. DOM XSS attacks inject a script payload into
due to same-origin policies baked into browsers. Basically, a
the browser DOM, where it is extracted and executed by the
server submits a random value as a cookie separate from the
browser. Finally, SQL Injection attacks send specially-crafted
session ID cookie. The client then inserts this random value
data to the application server, which then forwards that data
into a hidden field (or similar) where the random value can
to the underlying data store where that data is interpreted as
be validated by the receiving server. This way, the server need
valid SQL directives. Note that the first stages of stored XSS
not maintain any state; the cookie and the hidden field are
and SQL Injection attacks are the same - injecting content into
delivered by the client on resource requests, and the server has
the data store.
access to both pieces of data, allowing it to validate that they
All mainstream defenses against these attacks use filtering in are in fact both equal. Keep in mind though, cookies aren’t
one form or another, but in very particular orders. OWASP goes always available, and with cookies you can run into subdomain
into detail with respect to what kind of filtering happens in issues as well.
what order to defend against which types of attacks—suffice
Encrypted tokens are the final CSRF defense in use today.
to say that it’s complex, and you see developers messing the
This is similar to the double submit cookie approach, in that
order up all the time. (Ever see “&amp;” in a dynamic section
some combination of a user ID, a timestamp, and a nonce are
of a web site? This is why.) Escaping content is straightforward,
inserted into a data structure that is then encrypted by the
even if the ways you need to combine the escaping isn’t, but
server, using a stored key. The token is submitted to the client
it ends up being pretty obtuse. CSRF defenses are much more
in a hidden field in generated HTML. The client then uses this
interesting and more difficult to understand.
encrypted value with any HTTP requests sent to the server,
including the value in either HTTP attributes or hidden fields.
CSRF DEFENSES When the sever receives this token, it will decrypt the token
First, in order for any of these defenses to work, you can’t with its stored key and compare the extracted values, using
have any XSS vulnerabilities. XSS isn’t required to make CSRF the timestamp to protect against replay attacks.
work, but it does give attackers the ability to circumvent every
CSRF defense. The simplest way to detect CSRF attacks is to This is the state of the art today with respect to injection
just confirm that the target and origin URLs are the same. If attack defenses—either SQL Injection, XSS, or CSRF attacks.
they are, there’s no cross-site activity—nothing to see here, When looking at them in order like this, the evolution of
go ahead and fulfill the request. We do this by checking the synchronizer tokens into double submit cookies, which then
origin or referrer HTTP header values (or both) and comparing branched out into encrypted tokens, becomes clearer. Note
them to the target HTTP header value. While this approach can that none of these defenses are perfect, some have significant
give you insight into the validity of a request, these headers scalability problems, and standard browser use cases (e.g.
frequently don’t exist and are modifiable in a variety of ways. saving page or using the back button) can cause the defenses
This isn’t really sufficient to defend against CSRF, and may not to fail and deny service to legitimate users. Nevertheless, you
even be necessary, as it’s so easy to alter. need to protect against these kinds of attacks, and these are
the best ways to do it today.
The other three CSRF specific defenses include synchronizer
tokens, double submit cookies, and encrypted tokens.
DR. CHRIS LAMB currently serves as a cyber-security
Synchronizer tokens are randomly generated values that an research scientist with Sandia National Laboratories. He is also
application server inserts into sensitive elements as a hidden a Research Assistant Professor affiliated with the Electrical and
Computer Engineering department at the University of New Mexico.

field or within a URL (think forms, images, and any other
tag that will initiate an HTTP request). The server will then Currently, his research interests center around industrial control
system cybersecurity, machine learning, artificial intelligence, and their
extract this token and compare it to the token saved in the
intersections. He is a TOGAF 9 Certified Enterprise Architect and a
user session, rejecting the request if the two don’t match.
Certified Information Systems Security Professional (CISSP) through the
Usually, this is maintained for an entire user session, though International Information Systems Security Certification Consortium.
it can be implemented at the request level as well (though

19 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

 Content Management
Reinvented for Developers

Finally, an Open Source CMS that is:

Amazing for Developers
Easy for Editors
Simple for Operations

The first and only enterprise CMS based on Git, enabling content and code to
flow seamlessly throughout development and deployment cycles.

DOWNLOAD
READ E-BOOK
CRAFTER CMS

craftersoftware.com
SPONSORED OPINION DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

CMS Reinvented What web developers need is a new approach to content

management! A CMS built from the ground up for modern web (and
mobile) app development. A CMS built upon microservices and built

for Modern
with modern robust enterprise tools (Spring, Groovy scripting). A
headless CMS with REST APIs that deliver JSON (or XML) to any UI
development framework (React, Angular, Node, vanilla JavaScript,
really any UI technology).

Web Dev A CMS based on the most popular source code control system (Git)
that allows both content and code to seamlessly flow back and
forth through the development and deployment cycles. A CMS that
Modern web apps frequently contain a lot of content, including rich doesn’t rely on a single database architecture, but a distributed and
digital media. The most engaging apps keep their content and look/ decentralized data tier that scales out on the elastic web. A CMS
feel updated regularly, and they benefit from content targeting and that enables and actually accelerates agile development. And a
personalization to better address the end user needs. CMS that lets business users edit content and create personalized
digital experiences without developer support. Developers and users
As a result, developers must consider incorporating a content
working cohesively, but independently, together.
management system (CMS) into their development, allowing
business users to edit and manage content and optimize the
Now that would revolutionize modern day web development,
digital experience. However, traditional CMS platforms frustrate
wouldn’t you say? Learn more at craftersoftware.com.
web developers, slowing down development and deployment of
code. Legacy CMS solutions are monolithic, database-driven, with
incomplete APIs. And they usually constrain developers to using old WRITTEN BY RUSS DANNER
and restrictive UI tools and development processes. VICE PRESIDENT, PRODUCTS AT CRAFTER SOFTWARE

Crafter CMS
Crafter CMS enables rapid and agile development of innovative, high performance,
omni-channel digital experiences.

CATEGORY NEW RELEASES OPEN SOURCE STRENGTHS

CMS, SaaS, PaaS Continuous Yes • The first and only enterprise CMS based
on Git, enabling content and code to flow
A major restaurant franchise that operates globally needed to revamp its digital presence for seamlessly throughout development and
its e-commerce website and mobile app. Due to its modern approach to content management, deployment cycles
Crafter CMS was selected as the content platform on which to build all their digital experiences.
• Headless CMS (Content-as-a-Service)
With a large percentage of their revenue coming from online ordering, the restaurant brand’s with strong APIs and support for any UI
first priority was to build a modern, user-friendly web experience that allowed customers framework
to quickly browse, find specials, and order food for delivery. Crafter CMS supports any UI
framework, including all modern JavaScript frameworks such as React and Angular, so a fresh • User friendly in-context editing tools and
responsive user experience was easily created. In addition, a native mobile app was built, multi-channel preview for content editors
leveraging Crafter’s Content-as-a-Service capabilities to deliver rich content through the
• Shared-nothing architecture (No JCR, No
mobile experience.
Database) built for elastic scalability
Crafter’s backend infrastructure based on Spring and its native support for Groovy scripting
• Very high performance content delivery
allowed easy integration to the restaurant’s ERP and e-commerce backend systems, allowing
individual franchise owners to customize local promotions based on, among many factors,
NOTABLE CUSTOMERS
real-time inventory of ingredients. Because this restaurant chain is a major sponsor of
• AT&T • PGA Tour
nationwide (even global) sporting events during which large scale TV and social media
advertising was in play, Crafter’s high performance architecture and its ability to rapidly scale • Mastercard • AppNexus
out elastically enables the handling of very large surges of web traffic and keep business • Marriott • Bank of New York Mellon
running smoothly during these peak periods. • Papa John’s • Banca Mediolanum

WEBSITE craftersoftware.com TWITTER @craftersofware BLOG blog.craftersoftware.com

21 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

QUICK VIEW

Using Kotlin with 01 Learn how Kotlin can be used

for developing web service
applications in a simple and

Ktor to Create
elegant way.

02 See what makes ktor, itself

written in Kotlin, a very
interesting library for the
purpose of writing web apps

Web Apps
with Kotlin.

03 Take a look at how Kotlin’s

powerful features like type-
safe builders, coroutines and
extension functions are utilized
inside ktor.

04 Finally, learn how a ktor app can

BY SIMON WIRTZ be tested with very little effort.
SOFTWARE DEVELOPER, NDESIGN

When Google made Kotlin an official language and mainly non-blocking. ktor does not dictate which
for Android a few months ago at Google I/O, the frameworks or tools you use, so you can choose whatever
logging, DI, or templating engine you like. The library is
language quickly gained a lot of popularity in the
pretty light-weight in general, but is still very extensible
Android world. On the server side though, Kotlin is
through a plugin mechanism.
not as broadly adopted, and some people still seem
to be cautious when backend services are involved. One of the greatest advantages attributed to Kotlin is
Other developers are convinced that Kotlin is its ability to provide type-safe builders, also known as
mature enough and can safely be used for any Domain Specific Languages (DSL). Many libraries already
server application in which Java could play a role provide DSLs as an alternative to common APIs, such as
otherwise. the Android library Anko, the Kotlin html builder, or the
freshly released Spring 5 framework. As we will see in the

If you want to develop web apps with Kotlin, upcoming examples, ktor also makes use of such DSLs,
which enable the user to define the web app’s endpoints in a
you can choose from various web frameworks
very declarative way.
like Spring MVC/WebFlux, Vert.x, Vaadin, and
basically everything available for the JVM. Besides
EXAMPLE APPLICATION
the aforementioned frameworks, there’s also a In the following example, a small RESTful web service will
Kotlin specific library available for creating web be developed with ktor. The service will use an in-memory
applications, called ktor. After reading this article, repository with simple Person resources, which it exposes
you’ll know what ktor is, its advantages are, and how through a JSON API. Let’s look at the components.
you can quickly develop a web application in Kotlin.
PERSON RESOURCE AND REPOSITORY
KTOR According to the app’s requirements, a resource “Person” is
The web application framework ktor, written in Kotlin, defined as a data class, and the corresponding repository is
is meant to provide a tool for quickly creating web defined as an object, Kotlin’s way of applying the Singleton
applications with Kotlin. The resulting software may pattern to a class.
be hosted in common servlet containers, like Tomcat,
or standalone in a Netty, for example. Whatever kind of data class Person(val name: String, val age: Int){
hosting you choose, ktor is making heavy use of Kotlin var id: Int? = null
}
coroutines, so that it’s implemented 100% asynchronously

22 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

The resource has two simple properties which need to be

defined when a new object is constructed, whereas the id
property is set later when stored in the repository.

The Person repository is rather unspectacular and not ktor does not dictate which
worth observing. It uses an internal data store and provides
common CRUD operations. frameworks or tools you use, so

ENDPOINTS you can choose whatever logging,

The most important part of the web application is the
configuration of its endpoints, exposed as a REST API. The DI, or templating engine you like.
following endpoints will be implemented:

The application won’t support an update operator via PUT.

ENDPOINT HTTP METHOD DESCRIPTION

/person GET Requests all Person resources

The fundamental class in the ktor library is Application,
Requests a specific Person
/persons/{id} GET which represents a configured and, eventually, running web
resource by its ID
service instance. In the snippet, an extension function main()
Requests all Person resources is defined on Application, in which it’s possible to call
/persons DELETE
to be removed
functions defined in Application directly, without additional

Requests all Person resources qualifiers. This is done by invoking install() multiple times,
/persons/{ID} DELETE
to be removed by its ID a function for adding certain ApplicationFeatures into
the request processing pipeline of the application. These
Requests to store a new Per-
/persons POST features are optional and the user can choose from various
son resource
types. The only interesting feature in the shown example is
Delivers a simple HTML page
/ GET ContentNegotiation, which is used for the (de-)serialization
welcoming the client
of Kotlin objects to and from JSON, respectively. The Gson
library is used as a backing technology.
ROUTING WITH KTOR
Now ktor comes into play with its structured DSL, which The routing itself is demonstrated by defining the GET
will be used for defining the previously shown endpoints, a endpoint for retrieving all Person resources here. It’s
process often referred to as “routing.” Let’s see how it works: actually straight-forward since the result of the repository
call getAll() is just delegated back to the client. The call.
fun Application.main() { respond() invocation will eventually reach the GsonSupport
install(DefaultHeaders) feature, taking care of transforming the Person into its JSON
install(CORS) {
representation. The same happens for the remaining four
maxAge = Duration.ofDays(1)
} REST endpoints, which will not be shown explicitly here.
install(ContentNegotiation){
register(ContentType.Application.Json,
GsonConverter()) THE HTML BUILDER
} Another cool feature of ktor is its integration with other
Kotlin DSLs like the HTML builder, which can be found on
routing {
get(“/persons”) { GitHub. By adding a single additional dependency to a ktor
LOG.debug(“Get all Person entities”) app, this builder can be used with the extension function
call.respond(PersonRepo.getAll())
call.respondHtml(), which expects type-safe HTML code to
}
} be provided. In the following example, a simple greeting to
// more routings the readers is included, which the web service exposes as its
} index page.

23 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

TESTING
A web framework or library is only applicable if it comes
with integrated testing means, which ktor actually does.
One of the greatest advantages Since the GET routing for retrieving all Person resources
was already shown, let’s have a look at how the endpoint

attributed to Kotlin is its ability can be tested.

to provide type-safe builders, fun Application.main() {

@Test
also known as Domain Specific fun getAllPersonsTest() =
withTestApplication(Application::main) {
val person = savePerson(gson.
Languages (DSL). toJson(Person(“Bert”, 40)))
val person2 = savePerson(gson.
toJson(Person(“Alice”, 25)))
handleRequest(HttpMethod.Get, “/persons”) {
addHeader(“Accept”, json)
}.response.let {
assertEquals(HttpStatusCode.OK,
it.status())
val response = gson.fromJson(it.content,
Array<Person>::class.java)
get(“/”) {
response.forEach { println(it) }
call.respondHtml {
response.find { it.name == person.name } ?:
head {
fail()
title(“ktor Example Application”)
response.find { it.name == person2.name } ?:
}
fail()
body {
}
h1 { +”Hello DZone Readers” }
assertEquals(2, PersonRepo.getAll().size)
p {
}
+”How are you doing?”
}
}
} This one is quite simple: Two resource objects are added
} to the repository, then the GET request is executed
and some assertions are done against the web service
response. The important part is withTestApplication(),
which ktor offers through its testing module and makes
STARTING THE APPLICATION
it possible to directly test the Application.
After having done the configuration of a ktor application,
there’s still a need to start it through a regular main
The article presented basically everything worth knowing
method. In the demo, a Netty server is started standalone
in order to get started with ktor web applications. For
by doing the following:
more details, I recommend the ktor homepage or the
samples included in the ktor repository.
fun main(args: Array<String>) {
embeddedServer(Netty, 8080, module = The complete source code of the developed web
Application::main).start(wait = true) application can be found on GitHub, it’s backed by a
}
Gradle build.

SIMON WIRTZ has been having fun as a Software Developer

The starting is made pretty simple by just calling the
with a focus on Java (web-)applications for almost 6 years now.
embeddedServer() method with a Netty environment, a Currently he works for a German software company in very different 
port and the module to be started, which happens to be areas, mostly involved in Spring and OSGi development with Java.

the thing defined in the Application.main() extension He started supporting Kotlin in January 2017 by blogging and
speaking about it, and he uses the language whenever possible.
function from the previous example.

24 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DIVING DEEPER I N TO WEB DE V ELOPMEN T

TOP #WEBDEV TWITTER ACCOUNTS TO FOLLOW BEST WEB DEVELOPMENT ZONES

@JOHN_PAPA @RAUSCHMA WEB DEV DZONE.COM/WEBDEV

John Papa Axel Rauschmayer Web professionals make up one of the largest sections of IT audiences; we are
collecting content that helps Web professionals navigate in a world of quickly
changing language protocols, trending frameworks, and new standards for UX.
@UMAAR @IREADERINOKUN
Umar Hansa Ire Aderinokun
MOBILE DZONE.COM/MOBILE
The Mobile Zone features the most current content for mobile developers.
Here you’ll find expert opinions on the latest mobile platforms, including
@ADDYOSMANI @CHRISCOYIER Android, iOS, and Windows Phone. You can find in-depth code tutorials,
Addy Osmani Chris Coyier
editorials spotlighting the latest development trends, and insight on upcoming
OS releases.

@PAUL_IRISH @SWIZEC
Paul Irish Swizec PERFORMANCE DZONE.COM/PERFORMANCE
Scalability and optimization are constant concerns for the Developer and
Operations manager. The Performance Zone focuses on all things performance,
@SARASOUEIDAN @RACHELANDREW covering everything from database optimization to garbage collection to
Sara Soueidan Rachel Andrew tweaks to keep your code as efficient as possible.

TOP WEB DEVELOPMENT REFCARDZ TOP WEB DEVELOPMENT BOOKS

NODE.JS BY DAVE WHITELEY LEARN JAVASCRIPT VISUALLY BY IVELIN DEMIROV
Node.js is a JavaScript runtime that runs on top of Google’s open-source The OWASP Top 10 is a list of the top ten most critical web application security
JavaScript engine called V8. Pairing JavaScript’s naturally event-driven, risks. These are the most important things for security experts to focus on.
asynchronous coding style with non-blocking I/O libraries makes Node.js
fast, lightweight, and efficient.
A SMARTER WAY TO LEARN JQUERY BY MARK MYERS
This GitHub page contains an awesome variety of information security
ANGULARJS BY GIL FINK
resources, providing you with everything from training material to online
Provides an essential reference to AngularJS, an MVW framework that
courses to books.
enables web developers to build dynamic web applications easily.

REACT.JS ESSENTIALS BY HEMANTH H.M. THE PRINCIPLES OF OBJECT-ORIENTED JAVASCRIPT BY NICOLAS C. ZAKAS

Gives you the essentials of React.js, from the architecture to the virtual Learn what makes JavaScript functions unique, how to define your own con-
DOM, from building components to styling them. structors, inheritance patterns for types and objects, and more.

TOP WEB DEVELOPMENT PODCASTS

ADVENTURES IN ANGULAR THE BIG WEB SHOW JAVASCRIPT JABBER
This podcast includes overviews of new Whether you’re a web designer or a web devel- This weekly podcast features in-depth talks
technologies in the web dev world, Angular- oper, there’s something in The Big Web Show with web developers about using JavaScript,
JS tutorials, and interviews with the Angular for you. The podcast includes episodes about career advice, and personal projects.
community. the mysteries of UX, practical design discovery,
and code.

25 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

QUICK VIEW

Executive Insights on 01 Choose the right technology to

ensure you deliver a good user
interface, user experience, and

the Current and Future

customer experience across
all platforms.

02 Ultimately, we will have

collaborative tools that help

State of Web Application develop web apps that work

seamlessly across devices and
form factors.

Development
03 Developers need to: 1) be
empathetic; 2) know the
fundamentals of common
languages; and, 3) have a desire
to learn and take on more
responsibility.

BY TOM SMITH
RESEARCH ANALYST, DZONE

To gather insights on the state of web application stable vendors with a proven track record, using up-to-date
development today, we spoke with 12 executives who approaches that actually work everywhere they need to.

are familiar with the current state of the industry. Understand what the customer is doing and what device they are
Here’s who we spoke to: using so you are able to provide a great UX that empowers users
and customers and leads to business growth. Provide a common
MATT CHOTIN SR. DIR. OF DEVELOPER INITIATIVES, APPDYNAMICS UX across all platforms, operating systems, and form factors.
MICHAEL BECKLEY CTO, APPIAN
DevOps platform upgrades, patches, security, and scaling
GIL SERVER CEO, APPLITOOLS should be built-in so you can focus on collaborating with your
business to deliver high-quality apps. Automation will help you
MIKE KAIL CTO, CYBRIC
scale and produce better, more secure apps quickly.
KEVIN BRIDGES CTO, DRUD

ANDERS WALLGREN CTO, ELECTRIC CLOUD 02 The most significant changes to the development of web
applications have been the rising popularity of JavaScript
JIM MCKEETH DEVELOPER ADVOCATE, EMBARCADERO
and microservices. JavaScript’s explosion and the number of
LUCAS VOGEL FOUNDER, ENDPOINT SYSTEMS frameworks that are evolving are breathtaking. While they are
great at providing a common experience across all screens, it
CHARLES KENDRICK CTO, ISOMORPHIC SOFTWARE
can be challenging to keep up with them.
MARK BROCATO ENGINEERING DIRECTOR, SENCHA
Companies are either implementing microservices or exploring
COLE FURFARO-STRODE LEAD SOFTWARE ENGINEER, SPARKPOST
ways to use them. We see this in push notifications and the need
PETE CHESTNA DIR. OF DEVELOPER ENGAGEMENT, VERACODE for services to provide features and functionalities end users
have come to expect. Web application developers need to think
more about collaborating with business operations to ensure
KEY FINDINGS
alignment of data, process, and business rules with new CX.
01 The keys to developing web applications are choosing the
right technology and ensuring you deliver a good user interface
03 Three industries were specifically mentioned for web
(UI), user experience (UX), and customer experience (CX).
development use cases: healthcare, defense, and technology,
The number one key is technology choice. Customers go but there were plenty of technical use cases with automation,
to development shops with a half-built app because they and these were the only industry examples mentioned multiple
picked the wrong technology for the job. Avoid the outdated, times. This shows the breadth and depth of possibilities with
overblown frameworks from the largest vendors and find the web apps.

26 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

Web applications allow the analysis of chemical assays and in the growth of the app. We’ll have the ability to coordinate
animal tests, as well as the analysis of contracts with partners all of the different variables that can affect web applications to
and other functions. Another pharmaceutical is using web ensure they are fully synchronized before they are presented to
apps to improve patient adherence to and compliance with the end user.
prescribed medicine. Web apps can also be used to accelerate
clinical trials.
06 Different aspects of security tend to be the biggest

Web applications can be used to track and itemize costs concerns around web applications. The explosion of JavaScript

involved in government bids through a network of suppliers is opening companies up to potential security vulnerabilities.

and contractors so a company can provide the necessary We need to identify bad actors more quickly and get them off

transparency for bids that can be in the billions of dollars. the system. We also need to be aware of the growth in insider
threats and the opportunity for human mistakes.
Chip manufacturers can use web applications to collaboratively
analyze performance and defects in batches of chips to refine We need to test application frontends and backends in chal-
their manufacturing process, which results in higher quality lenging environments. Some apps and sites are still not
chips at lower cost and less waste. running SSL by default. Open source is no more or less secure
than first-party code; however, it does not age well. If a vulnera-
Other technical applications include management of bility is announced it needs to be fixed in a timely manner. The
structured data, providing DevSecOps, ensuring cross-platform OWASP Top 10 are also still an ongoing concern, and, unfortu-
compatibility, and providing tools that help make developers of nately, developers are not held accountable for secure code.
web apps more productive by reducing two weeks of work to a
half-day. Additionally, we continue to see too much reliance on
technology and not enough on business outcomes. Inherent in
this is that we need to keep the business, and its data, secure.
04 The most common hurdles affecting the development
of web applications are: 1) culture; 2) legacy systems; and, 3)
complexity on multiple fronts. There’s a mismatch between 07 Three skills mentioned most frequently that developers
developers, DevOps, and SecOps. Testing is still being done need to build effective web apps are: 1) empathy; 2) knowledge
manually, and environment management is a constant of the fundamentals of common languages; and, 3) a desire to
struggle. It creates inefficiencies that lead to higher costs, lower learn and take on more responsibility.
job satisfaction, and degraded quality applications. Speed to
market is bogged down by how hard it is to release software. Empathize with your users and those you are working with.
Ask yourself what the end user is trying to accomplish with
The modernization of legacy systems is challenging. Companies your app. Walk through the steps your users are taking to
need to help their employees with modern development and understand their pain points and their workflow. Have a good
technology. Legacy systems teams don’t want to consider grasp on the hot new technologies, but empathy for the user so
security, passwords, or international standards because of their
you can create the best UX.
inability to see the possibilities of expanded adoption of their
app. They are taking a narrow view, and their app will not scale. Know the fundamentals of the most popular languages,
Bad choices early on and a lack of flexibility can lead to an whether you’re building with JavaScript, HTML, or CSS. Know
expensive and time-consuming re-work of the application. the right CSS frameworks, JavaScript frameworks, and layout
requirements so you can build a good UI/UX to manage the
It is also a challenge to provide a consistent UX and beautiful
middleware layer.
UIs, across multiple modalities. All of the changes are around
tooling. Some developers don’t even know what version of
You need to have a desire to continuously improve yourself,
JavaScript they are transpiling to. How many versions of clients
your apps, and the development process. Begin by using the
or your API are you going to support? Apps are no longer self-
principles of Continuous Delivery and DevOps. Measure what
contained. You don’t know which browser your user is using, you
matters, collaborate with your team, automate your pipeline, and
cannot control when browsers are updated, operating systems
improve. A full-spectrum, well-rounded engineer is responsible
and devices are always changing and this affects the UX. You
for quality, unit tests, security, and containerization.
need to be able to see what the end user is experiencing.

TOM SMITH is a Research Analyst at DZone who excels at

05 The future of web application are collaborative tools that
gathering insights from analytics—both quantitative and qualitative—
help develop web apps that work seamlessly across devices
to drive business results. His passion is sharing information of value to
and form factors. These applications will use AI and machine 
help people succeed. In his spare time, you can find him either eating
learning to understand the patterns of users to improve at Chipotle or working out at the gym.

relevance and usefulness, enhancing the UX which will result

27 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

Solutions Directory
This directory contains platforms, frameworks, and libraries to build and maintain web applications.

It provides free trial data and product category information gathered from vendor websites and project

pages. Solutions are selected for inclusion based on several impartial criteria, including solution maturity,

technical innovativeness, relevance, and data availability.

COMPANY PRODUCT PRODUCT TYPE FREE TRIAL WEBSITE

ActiveState Komodo IDE PaaS 21 Days activestate.com/komodo-ide

Adobe PhoneGap Hybrid Web Development Platform Open Source phonegap.com

Afilias Technologies DeviceAtlas Device Detection 30 Days deviceatlas.com

Amazon AWS Elastic Beanstalk PaaS Free tier available aws.amazon.com/elasticbeanstalk

Apache Cordova Hybrid Web Development Platform Open Source cordova.apache.org

Aryaka SmartCDN Web App Acceleration Available by request aryaka.com/services/web-app-acceleration

Automattic Wordpress CMS Free tier available wordpress.com

Backtrace Backtrace Debugging Platform Available by request backtrace.io

Bithound Bithound Node.js Debugging Free tier available bithound.io

Blue Spire Aurelia JavaScript Framework Open Source aurelia.io

Browserling Browserify Build Script Tool, Package Manager Open Source browserify.org

BrowserStack BrowserStack Web Testing Available by request browserstack.com

Cake Foundation CakePHP PHP Web Framework Open Source cakephp.org

ClojureScript ClojureScript Compiler Open Source clojurescript.org

28 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

COMPANY PRODUCT PRODUCT TYPE FREE TRIAL WEBSITE

CloudFlare CloudFlare JavaScript CDN Free tier available cloudflare.com/cdn

CoffeeScript CoffeeScript Language Open Source coffeescript.org

CommonJS CommonJS Package Manager Open Source commonjs.org

Crafter Software Crafter CMS CMS, Development Platform Available by request craftersoftware.com/products/overview

CSS Crush CSS Crush CSS Preprocessor Open Source the-echoplex.net/csscrush

Django Software
Django Python Web Framework Open Source djangoproject.com
Foundation

DocumentCloud Backbone.js JavaScript Framework Open Source backbonejs.org

DocumentCloud Underscore.js JavaScript Library Open Source underscorejs.org

Dropbox Dropbox platform PaaS Available by request dropbox.com/developers

Drupal Drupal CMS Open Source drupal.org

Ecma International ECMAScript Scripting Language Open Source github.com/tc39/ecma262

Elm Elm Language Open Source elm-lang.org

Engine Yard Engine Yard Cloud PaaS 21 Days engineyard.com

Facebook React.js JavaScript Library Open Source facebook.github.io/react

Facebook Flow Static Type Checker Open Source flowtype.org

Fujitsu Fujitsu S5 Cloud Service PaaS No Free Trial welcome.globalcloud.global.fujitsu.com

GNU Make Build Script Tool Open Source gnu.org/software/make

Google AngularJS JavaScript Framework Open Source angularjs.org

Google Google Cloud Platform PaaS 60 Days cloud.google.com

Google Google Hosted Libraries JavaScript CDN Open Source developers.google.com/speed/libraries

Grails Grails Java Web Framework Open Source grails.io

29 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

COMPANY PRODUCT PRODUCT TYPE FREE TRIAL WEBSITE

Grunt Grunt Build Script Tool, Package Manager Open Source gruntjs.com

Gulp Gulp Build Script Tool Open Source gulpjs.com

Hewlett Packard
HPE Helion PaaS Available by request hpe.com/us/en/solutions/cloud.html
Enterprise

IBM Bluemix PaaS 30 Days ibm.com/bluemix

IBM LoopBack Node.js API Framework Open Source loopback.io

Intel Crosswalk Web Runtime Free Solution crosswalk-project.org

Varies by hosting
Jelastic Jelastic PaaS jelastic.com
provider

JetBrains WebStorm IDE 30 Days jetbrains.com/webstorm

JetBrains PyCharm IDE Free tier available jetbrains.com/pycharm

JetBrains RubyMine IDE 30 Days jetbrains.com/ruby

JetBrains PHPStorm IDE 30 Days jetbrains.com/phpstorm

Available through early

JetBrains Rider IDE jetbrains.com/rider
access

JetBrains Resharper Debugging Platform 30 Days jetbrains.com/resharper

Langa Trails Node.js Web Framework Open Source trailsjs.io

Laravel Laravel PHP Web Framework Open Source laravel.com

LeaseWeb LeaseWeb IaaS Available by request leaseweb.com/cloud

Less Less CSS Preprocessor Open Source lesscss.org

Lightbend Play Java Web Framework Open Source playframework.com

Mendix Mendix Platform PaaS Up to 10 Users mendix.com

Meteor Development
Meteor JavaScript Framework Open Source meteor.com
Group

30 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

COMPANY PRODUCT PRODUCT TYPE FREE TRIAL WEBSITE

Micro Focus Unified Functional Testing Web Testing 60 Days software.microfocus.com/en-us/software/uft

Microsoft Visual Studio Core IDE Free Solution asp.net

Microsoft ASP.NET Web Framework Free Solution asp.net

Microsoft Microsoft Azure PaaS Free tier available azure.microsoft.com

Microsoft TypeScript JavaScript Superset Open Source TypeScriptlang.org

docs.microsoft.com/en-us/aspnet/ajax/cdn/
Microsoft Microsoft Ajax CDN JavaScript CDN Open Source
overview

MochaJS Mocha Web Testing Open Source mochajs.org

Myth Myth CSS Preprocessor Open Source github.com/segmentio/myth

NearForm Hapi JavaScript Framework Open Source hapijs.com

Node.js Foundation Node.js JavaScript Environment Open Source nodejs.org/en/

Node.js Foundation Koa Web Framework Open Source koajs.com

Node.js Foundation Express Web Framework Open Source expressjs.com

Nodesource N|Solid Node.js Runtime Available by request nodesource.com

npm, inc. npm Package Manager Open Source npmjs.com

Open Source Matters Joomla! CMS Open Source joomla.org

OpenQA Selenium Web Testing Open Source seleniumhq.org

Optimizely Optimizely Web Testing and Experimentation 30 Days optimizely.com

Oracle Oracle Cloud PaaS Available by request cloud.oracle.com

OutSystems OutSystems PaaS Free tier available outsystems.com

perfectomobile.com/solutions/perfecto-test-
Perfecto Mobile CQ Lab Automated web and mobile testing Available by request
automation

PhantomJS PhantomJS Web Testing Open Source phantomjs.org

Pivotal Labs Jasmine Web Testing Open Source jasmine.github.io

31 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

COMPANY PRODUCT PRODUCT TYPE FREE TRIAL WEBSITE

Pivotal Software Spring Java Web Framework Open Source spring.io

Polymer Authors Polymer Web Components Library Open Source polymer-project.org

Progress Software OpenEdge PaaS 60 days progress.com/openedge

Qlik Qlik Playground Web App Testing Environment Open Source playground.qlik.com/

QuickBase, Inc. QuickBase PaaS 30 days quickbase.com

Rainforest Rainforest Automated Mobile and Web Testing Available by request rainforestqa.com

Raygun Pulse Real User Monitoring 30 days raygun.com/products/real-user-monitoring

Red Hat OpenShift PaaS Free tier available openshift.com

RequireJS RequireJS Package Manager Open Source requirejs.org

RisingStack Trace Node.js Debugging Free tier available trace.risingstack.com

Rogue Wve Software Zend Framework PHP Web Framework Open Source framework.zend.com

Ruby on Rails Ruby on Rails Web Framework Open Source rubyonrails.org

Salesforce Heroku Platform PaaS Free tier available heroku.com

SAP OpenUI5 JavaScript UI Library Open Source openui5.org

SAP SAP HANA Cloud Platform PaaS Free tier available hcp.sap.com

Sass Sass CSS Preprocessor Open Source sass-lang.com

Sauce Labs Sauce Web Testing 14 Days saucelabs.com

Sencha Sencha Platform Web App Platform 30 Days sencha.com/platform

Sencha Ext JS JavaScript Framework 30 Days sencha.com/products/extjs

Sencha Sencha GXT JavaScript Framework 30 Days sencha.com/products/gxt

32 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

COMPANY PRODUCT PRODUCT TYPE FREE TRIAL WEBSITE

SensioLabs Symfony PHP Web Framework Open Source symfony.com

StackPath SecureCDN JavaScript CDN 15 Days stackpath.com

Stylus Stylus CSS Preprocessor Open Source stylus-lang.com

swisscom.ch/en/business/enterprise/offer/
Swisscom Swisscom Application Cloud PaaS Available by request cloud-data-center-services/paas/application-
cloud.html

Telerik Kendo UI HTML and JavaScript Framework Available by request telerik.com/kendo-ui-html-framework-opt

The jQuery Foundation jQuery JavaScript Library Open Source jquery.com

The jQuery Foundation QUnit Web Testing Open Source qunitjs.com

The jQuery Foundation jQuery CDN JavaScript CDN Open Source code.jquery.com

Tilde Ember.js JavaScript Framework Open Source emberjs.com

Tsuru Tsuru PaaS Open Source tsuru.io

Twitter Bootstrap Web Framework Open Source getbootstrap.com

Twitter Bower Package Manager Open Source bower.io

Vaadin Vaadin UI Framework Open Source vaadin.com

Verizon Digital Media

Edgecast CDN CDN Available by request verizondigitalmedia.com/platform/edgecast-cdn
Services

Vue.js Vue.js JavaScript Framework Open Source vuejs.org

Walmart Labs Joi Validation System Open Source github.com/hapijs/joi

Walmart Labs Lazo Web Framework Open Source github.com/lazojs/lazo

WaveMaker WaveMaker PaaS 30 Days wavemaker.com

webcomponents.org Web Components Web Platform API Hosting Service Open Source webcomponents.org

Webpack Webpack Package Manager Open Source webpack.github.io

Real Time Communication Through

WebRTC WebRTC Open Source webrtc.org
APIs

wzrd.in wzrd.in Browserify-as-a-Service Open Source wzrd.in

33 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

DZONE.COM/GUIDES DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

G
ANGULAR MICROSERVICES ARCHITECTURE
A platform for building HTML and An architecture for an application that is
JavaScript web applications, led by Google built with several modular pieces, which are
and based on TypeScript. It is a rewrite of deployed separately and communicate with

L
the AngularJS JavaScript framework. each other, rather than deploying one single
piece of software.
COROUTINE
Coroutines simplify asynchronous MVC (MODEL-VIEW CONTROLLER)
programming by putting the complications A way of relating the UI to underlying data

O
into libraries. The logic of the program can models that lets developers reuse object
be expressed sequentially in a coroutine, code and reduce the time spent developing
and the underlying library will figure out the applications with UIs.
asynchrony.

S
NODE
DEPENDENCY INJECTION The most basic element that is used to build
A process that occurs in object-oriented data structure.
programming in which a resource that a
piece of code requires is supplied.

S
NODE.JS
An I/O framework that develops
DOM (DOCUMENT OBJECT MODEL)
applications that are highly dependent
Allows for the creation and modification
on JavaScript on both the client-side and
of HTML and XML documents as program
serverside. It is event-based, nonblocking,

A
objects to help control who can modify the
and asynchronous.
document.

REACT
INJECTION ATTACK
A library in JavaScript that is used to build

R
A scenario where attackers relay malicious
user interfaces.
code through an application to another
system for malicious manipulation of the
SINGLE-PAGE APPLICATION
application. These attacks can target an
A web application that responds to user
operating system via system calls, external

Y
actions and changes over time by rewriting
programs via shell commands, or databases
the app, rather than loading new web pages.
via query language (SQL) injection.

TYPESCRIPT
JAVASCRIPT
A superset of JavaScript developed by
An interpreted script language from Netscape
Microsoft that adds static typing.
that is used in website development for
both client-side and server-side scripting. It
USER INTERFACE (UI)
is easier and faster to code than compiled
A term to describe the ways in which the
languages, but takes longer to run.
end user directly interacts with a device or

JSON application.

JavaScript Object Notation; a language-

USER EXPERIENCE (UX)
independent textual data interchange format
A term to describe all aspects of the end
that is used in browser-based code to
user’s interaction with an application.
represent simple data structures and objects.

KOTLIN VUE.JS
A language that runs on the JVM, developed A JavaScript framework built for
by JetBrains, provided under the Apache designing user interfaces and single-page
2.0 License, offering both object-oriented applications, designed to be adopted
and functional features. incrementally.

34 DZONE’S GUIDE TO WEB DEVELOPMENT: FRAMEWORKS & RESPONSIVE DESIGN

Take your development
career to the next level.
From DevOps to Cloud Architecture, find great opportunities that
match your technical skills and passions on DZone Jobs.

Start applying for free

THESE COMPANIES ARE NOW HIRING ON DZONE JOBS:

Is your company hiring developers?

Post your first job for free and start recruiting for the world's most
experienced developer community with code 'HIREDEVS1'.

Claim your free post