The Future of Front-end development in Business apps

October 22th

12pm PT | 3pm ETWebinar

www.belatrixsf.com

Germán BerselliWeb & Front-End Developer

Bruno VilchesSenior Web Developer & Product Manager

Tomás MerloProject Leader

Panelists

Fernando GonzalezHost

Topics

• The rise of JavaScript and client-side web apps

• Web developer skills

• The importance of UX design

• App Migration solutions

The rise of JavaScript and client-side web apps

• Developers don’t need to go off and

learn an entirely new language

• Easier deployment

• Strong use of HTML5 JavaScript

APIs

• The logical move is to hand the

processing to the client-side

The rise of JavaScript and client-side web apps

• Node.js was the first to have

callback model

• Seamless multi-threading

management

• Code your apps in JavaScript

from end to end

The evolution of the front-end framework

• There’s no reason to start from scratch

• There are lots of options

• We’re eager to see development stack:• Front-end framework• Testing server• Task-runner• Dependancy management• Seamless integration with any other

platform• Easy deployment through command line or

GUI

Frameworks and Preprocessors CSS

• SASS, LESS, Compass• Coding features are now

available in CSSEg: variables, nestedblocks, etc.

• Easier standars, easiercode

SVG + HTML JAVASCRIPT IN CANVAS

• Using SVG we can draw on the tag<canvas> object

• APIs allow to interact with graphics and complex animations

• There’s no more need of Flash

Wider use of HTML5 native video

• Developers don’t have to worry about storage

• It always loads the rightvideo

• Easy to use

• Easier to monetize

SINGLE-PAGE WEB APPS

• Page transition totally transparent to the user• It’s easier to build the structure of an app• You only load what you use • Data layer separated from presentation layer

Outcome:A responsive

single page app

MOBILE WEB APPS

Devices will be fasterand more robust

Internet will be faster, more reliable

and ubiquitous

• HTML5 has matured as a mobile development platform

• One platform, one programming language

Developer Skills

Empathy in Communication

Time and Stress Management

Core Languages and Concepts of the Web

Design Sense

Importance of UX desing

• Involves a person's behaviors, attitudes, and emotions about using a particular product, system or service.

• Unseen hero of digital design.

Importance of ux desing

• Aims to achieve a delicate balance between the company’s strategy and the users’ goals.

• Key in start-ups or a big business

• The decision to stay or leave your site is made in milliseconds.

Benefits of a good User Experience design

1. Higher Productivity2. More sales3. Lower levels of training and

Support Cost4. Reduces Development Time

and Cost5. Reduces Maintenance Costs6. Increases Customer

Satisfaction

Metrics for User Experience

They’re key to:

• Keep track of the changes you implement over time

• Benchmarking against iterations

• Setting targets

Metrics for User Experience

Migration of applications to

HTML5/Javascript

App Migration

Years ago, companies used applications built in Flex and other technologies that were state-of-the-art but with the boom of mobile devices and cloud access, such Applications need to be migrated.

Migration solutions

The keys steps involved while going to HTML5 migration are:

1. Define the Migration Approach

2. Choose a Client side MVC Framework

3. Develop a testing plan

4. Define a Build and Deployment Process

1. Defining the Approach of Migration

a) Start from scratch and build a completely new app with HTML5

Consider this when:

• Current application is fairly simple

• Time and money restrictions are minimal

• It’s more convenient to get rid of current application than migrate it

b) Gradual migration of existing application functionality to HTML

Consider this approach when:

• The application is hosted in a web browser

• The application container can be converted first

• Gradual conversion to full HTML is acceptable

1. Defining the Approach of Migration

c) Starting with the HTML conversion of inner flex component workflows & slowly integrate application functionality

Consider this approach when:

• Components or workflows accessed by Flex can be converted first

• The fact that Flex components will remain in the application, after migration, is acceptable

1. Defining the Approach of Migration

Migration solutions

The keys steps involved while going to HTML5 migration are:

1. Define the Migration Approach

2. Choose a Client side MVC Framework

3. Develop a testing plan

4. Define a Build and Deployment Process

2. Choosing a client side MVC framework

There are several frameworks in the market

• How documented is the framework?

• Does the framework provide real world examples?

• Does the framework allow for you to create testable applications?

• Does the framework provide the level or support needed for your organization?

• What is the learning curve for developers?

• What are statistics and latests trends?

2. Choosing a client side MVC framework

Migration solutions

The keys steps involved while going to HTML5 migration are:

1. Define the Migration Approach

2. Choose a Client side MVC Framework

3. Develop a testing plan

4. Define a Build and Deployment Process

3. Develop a testing plan

• Unit testing• Functional testing

Migration solutions

The keys steps involved while going to HTML5 migration are:

1. Define the Migration Approach

2. Choose a Client side MVC Framework

3. Develop a testing plan

4. Define a Build and Deployment Process

4. Define a build and deployment process

1. Minify all JavaScript code2. Combine minified JavaScript into a single file 3. Compile LESS/SASS CSS code 4. Combine CSS code into single file5. Validate HTML, JavaScript, and CSS against organization or web standards6. Run unit tests7. Run functional tests8. Execute load tests in a staging environment

CONCLUSION:

Migrating Flex based apps to HTML5

• Is a tough task, define the right approach, methodologies and tools.

• It requires adherence to maintain existing application design, pattern and architectural sanctity.

• Starting off on the right foot is crucial

Q&A

Germán Berselligberselli@belatrixsf.com

Bruno Vilchesbvilches@belatrixsf.com

Tomás Merlotmerlo@belatrixsf.com

Contact us!

Belatrix Software

@BelatrixSF

Belatrix Software

Belatrix Software Factory

Thank you!