The Future Front-End Development for Business Apps - Webinar - PowerPoint PPT Presentation

About This Presentation
Title:

The Future Front-End Development for Business Apps - Webinar

Description:

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 – PowerPoint PPT presentation

Number of Views:197

less

Transcript and Presenter's Notes

Title: The Future Front-End Development for Business Apps - Webinar


1
October 22th12pm PT 3pm ET
Webinar
The Future of Front-end development in Business
apps
www.belatrixsf.com
2
Panelists
Fernando Gonzalez Host
Germán Berselli Web Front-End Developer
Bruno Vilches Senior Web Developer Product
Manager
Tomás Merlo Project Leader
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 dont 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
  • Theres no reason to start from scratch
  • There are lots of options
  • Were 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 ltcanvasgt object
  • APIs allow to interact with graphics and complex
    animations
  • Theres no more need of Flash

9
Wider use of HTML5 native video
  • Developers dont 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
  • Its 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

Internet will be faster, more reliable and
ubiquitous
Devices will be faster and more robust
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
    companys 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
  • Theyre 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
Defining the Approach of Migration
  • 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
  • Its 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
QA
33
Contact us!
Germán Berselli gberselli_at_belatrixsf.com
Bruno Vilches bvilches_at_belatrixsf.com
Tomás Merlo tmerlo_at_belatrixsf.com
34
Thank you!
_at_BelatrixSF
Belatrix Software
Belatrix Software
Belatrix Software Factory
Write a Comment
User Comments (0)
About PowerShow.com