Front-end development has become a key aspect for every project. End-users (and that means clients, sales reps, stakeholders and practically anyone using your software) want the app to be easy to use, intuitive, modern, good-looking and solid. They are asking you to move to the next generation in apps. Front-end development combines UI, development, analytics and much more to create seamless User Experience to drive engagement and happy clients. Learn about what you should be doing to enter the future, now. Webinar´s topics: UX Meaning Roles and Skills of a Front End Developer Apps Migration to New Platforms Trends in Front End Development

1. October 22th
12pm PT | 3pm ET
The Future of Front-end development in
Business apps
Webinar
www.belatrixsf.com

2. Germán Berselli
Web & Front-End Developer
Bruno Vilches
Senior Web Developer & Product Manager
Tomás Merlo
Project Leader
Panelists
Fernando Gonzalez
Host

3. Topics
• The rise of JavaScript and client-side web apps
• Web developer skills
• The importance of UX design
• App Migration solutions

4. 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

5. 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

6. 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

7. Frameworks and Preprocessors CSS
• SASS, LESS, Compass
• Coding features are now
available in CSS
Eg: variables, nested
blocks, etc.
• Easier standars, easier
code

8. 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

9. Wider use of HTML5 native video
• Developers don’t have to
worry about storage
• It always loads the right
video
• Easy to use
• Easier to monetize

10. 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

11. MOBILE WEB APPS
• One platform, one programming language
• HTML5 has matured as a mobile development platform
Devices will be faster
and more robust
Internet will be
faster, more reliable
and ubiquitous

12. Developer Skills
Empathy in Communication
Time and Stress Management
Core Languages and Concepts of
the Web
Design Sense

13. 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.

14. 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.

15. Benefits of a good User
Experience design
1. Higher Productivity
2. More sales
3. Lower levels of training and
Support Cost
4. Reduces Development Time
and Cost
5. Reduces Maintenance Costs
6. Increases Customer
Satisfaction

16. Metrics for User Experience
They’re key to:
• Keep track of the changes you implement
over time
• Benchmarking against iterations
• Setting targets

17. Metrics for User Experience

18. Migration of applications to
HTML5/Javascript

19. 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.

20. 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

21. 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

22. 1. Defining the Approach of Migration
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

23. 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

24. 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

25. 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?

26. 2. Choosing a client side MVC framework

27. 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

28. 3. Develop a testing plan
• Unit testing
• Functional testing

29. 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

30. 4. Define a build and deployment process
1. Minify all JavaScript code
2. Combine minified JavaScript into a
single file
3. Compile LESS/SASS CSS code
4. Combine CSS code into single file
5. Validate HTML, JavaScript, and CSS
against organization or web standards
6. Run unit tests
7. Run functional tests
8. Execute load tests in a staging
environment

31. 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

32. Q&A

33. Germán Berselli
gberselli@belatrixsf.com
Bruno Vilches
bvilches@belatrixsf.com
Tomás Merlo
tmerlo@belatrixsf.com
Contact us!

34. @BelatrixSF
Belatrix Software
Belatrix Software
Belatrix Software Factory
Thank you!