Making Better UI Faster 

Agenda

  • About me
  • Areas for improvements
  • How to improve
  • Solutions/Modern UI Trends
  • Why this technology stack?
  • Demo

I am...

Viktor Shevchenko

  • UI developer since 2009
  • Came to GlobalLogic as Middle UI developer
  • Team lead in GlobalLogic
  • Very enthusiastic about new technologies 
  • Focused on Front-end development

Areas for improvement

SPA over classic site

Benefits:

  • Decrease server load
  • Improve performance
  • Transfer only Data
  • Separation of concerns
  • More focused development

Clear Project Structure

Benefits:

  • Faster orientation in a project
  • Faster development speed
  • No more 'Find in Project' as start point
  • Strict line between UI and backend
  • more refactoring options
  • less legacy code

Building with UI Components

 

Benefits:

  • Clear component API
  • Re-usability booster
  • Easy component composition

Follow DPL Guidlines

 

Benefits:

  • Be consistent with other BMC products
  • Improve overall look and feel
  • Improve user experience inside of Discovery and through BMC product line 
  • Keeping small amount of fonts/font-sizes/elements types helps user a lot.

Do you want to talk about it?

How we can improve

and 

UI Trends

 

SPA Transition

<html>
    <head>
         <!-- Scripts and styles-->
    </head>
    <body>
        <!-- Page Content-->
    </body>
</html>
<html>
    <head>
         <!-- Scripts and styles-->
    </head>
    <body>
        <!-- Page Content-->
    </body>
</html>
<html>
    <head>
         <!-- Scripts and styles-->
    </head>
    <body>
        <!-- Page Content-->
    </body>
</html>

ui/page1

ui/page2

ui/page3

<html>
    <head>
         <!-- Global Styles-->
         <!-- App Styles-->
    </head>
    <body>
        <!-- Framework scripts-->
        <!-- Vendor scripts-->
        <!-- App scripts-->
    </body>
</html>
<html>
    <head>
         <!-- Global Styles-->
         <!-- App Styles-->
    </head>
    <body>
        <!-- Framework scripts-->
        <!-- Vendor scripts-->
        <!-- App scripts-->
    </body>
</html>

modern-ui/page1

modern-ui/page2

Component design

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

We propose to select a stack based on React.js library

React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

React abstracts away the DOM from you, giving a simpler programming model and better performance

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding

React

  • Not easy learning curve
  • Long time at the beginning
  • No data layer
  • Not famous (yet)
  • Simple concepts 
  • Make developer learn JS
  • Very fast in development
  • Extremely modular
  • Easy to maintain and refactor
  • Server rendering
  • External lib as data layer
  • Huge community

Pros

Cons

Aspects

  • Different from existing market solutions
  • Requires functional thinking

React plays very well with Redux

  • Store application state (JSON)
  • React on actions
  • Call reducers to update state
  • Connect component to state
  • Redraw component on state updates

Redux

React

React need a tool to transform JSX to JS

  • Can transpile ES6 to ES5
  • Extremely popular
  • Often updates
  • Many dependencies 
  • Can transpile ES6 to ES5
  • Introduce typings to JS
  • No dependencies 
  • Quite difficult to start

Babel

TypeScript

We will also need a build tool

  • Not another task runner
  • Module bundler
  • Many useful tools out of the box
  • Support React Hot Reload
  • Own dev-server
  • Bad documentation

WebPack

You will say... we already have one.

Component CSS

  • namespaced class names
  • follow BEM naming approach
  • safe when refactoring/removing
  • much easier when maintaining
  • less risk when removing legacy css

Demo time

What`s next?

We are ready to start!

Viktor

Dmytro

Vladlen

  • 2 month project with React
  • 1,5 month mobile-oriented project with React
  • Pet project with React and TypeScript
  • 1,5 month mobile-oriented project with React
  • 2 Pet projects with React
  • 1 Pet project with React

Questions?

Made with Slides.com