Viktor Shevchenko
Web developer from Kyiv
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?
Better UI
By Viktor Shevchenko
Better UI
- 1,276
