JS Lab`16. Александр Осин: "Задачи которые мы решаем и...

Development Activitiesvs

Technologies

Production software

!"#release v5.0.24

$income %

&

FIX-9801: Button does not work.

Click on button “Make a payment” takes no action.

'♂ )

new project

Development cycle

Time

Fun

Discovery Pros Cons'♂

You don't wantto be here.

Product stages

Release 1

Release 2 Release 3 Release N

Usual development %

*Stage where developers become sad

longest run

MVP

Technologydoesn't make us happy.*

*for a long run

What makes us happy?

Money$

+ Work done.

, Work done right.

- no ad-hoc’s- no stress- no unnecessary effort

-

.

So we need to solve task of non-

optimal work!

What kind of work dowe do?

Software engineering

Implementation

Features Fixes

Whats is next?

Field service background

%Workforce

pool

%Dispatcher

/Customer

01

Inventory

Request

Queue

Appointment

Activity

%Technicianwith skill

01

Neededinventory

+ + 2Knownactivity

= ETA

, Work always done right,but there are no time for coffee.

So what kind of activitiesdo we do?

Data representation

News

Articles

Goods

Real world data

Photos "Markup

01 Inventory

Plain JS

Template engine

Angular 1.x

React

Expressions Concepts ETA

3

3 3

3

4

4

4

4

3

3

3

3

Data synchronisation

"Browser

5Server

Load

Save

01 Inventory

Plain JS

Abstractionlayer Concepts ETA

Angular 1.x

Flux, reflux

Backbone

Ember

3

3

3

3

3

3

3

3

3

4

4

4

4

4

4

Representation update

"Markup

Lorem ipsum sit dolor amet, lipsum sit and other useful information here

New markup

01 Inventory

Plain JS

Angular 1.x

React

Databinding

Smartupdate ETAConcepts

3

3

3

4 4

4

4

33

333

Representation behaviour

"Browser

/Userclick

touchchange

…

interface updatedata update

…

01 Inventory

Plain JS

Angular 1.x

React

Callback Concepts ETA

3

3 3 3

3

33

Databinding

4

3

4

3

3

Hierarchysupport

4

4

3

Component organisation

66 666 666 6Code

7API

01 Inventory

Plain JS

Angular 1.x

React

Approach

4

3

3

Dependencyinjection

4

3

3

Styling

4

4

3

ETA

3

3

4

Hierarchy organisation

…

7Application

7Screen 1

7Screen 2

7Screen N

777

Reusablecomponents

01 Inventory

Plain JS

Angular 1.x

React

Approach

4

3

3

Unlimitedhierarchy

3

ETA

3

3

3 4

4

Screens management

Switcher

login

******"Sign in

News feedUser profile Photo gallery

01 Inventory

Backbone

Angular 1.x

Ember

Configuration

4

3

3

Callbackattachment ETA

3

4

3

3

34

What else?

Common elements

Text field

Text area

7

Button

Input OutputComplexcomponents

!"#Platforms support

01 Inventory

Bootstrap(Foundation,Materialize,Material UI)

Predefinedcomponents

3

3

ETA

34

Developmentapproach

3

ExtJS(Kendo UI)

Complexcomponents

4

Highcharts

3

3

3 4 3 3

Forms validation

required

******

Required field

Breaking news

Lorem ipsum sit dolor amet

Title

Content

AttachmentsDocument.pdf

Image 01.jpg

Unsupported type

Certain file type

Breaking news

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum sit dolor amet

Comment

23 symbols left.

Length limitation

01 Inventory

Angular 1.x

ExtJS

Form validation

Predefinedtypes

3

3

Customvalidation ETA

3 3

3

3

3

3

3

Grids

Table

Resize.

Actions.

Editable.

Resi

ze.

Scroll to load.

Complex grid

01 Inventory

Angular 1.x(ui-grid,ag-grid)

ExtJS

Kendo UI

Advancedconfiguration

3

3

Advancedediting ETA

3

3

3

3

jQgrid

Buffering

3

3

3

4 4 3 3

4 4 4

Charts

0

1.3

2.5

3.8

5

2012 2013 2014 2015

HTML CSS JavaScript

amCharts

FusionCharts

Chart.js

Gantt

3

Timeline

3

33

3

01 Inventory

Network Writeyour own

4 4

4

ETA

3

3

4 44 4 3

d3 434 44

Well, that’s enough!

We’ve come to following

2 We are doing activitieslike others

%We have all needed

skills

01 And all neededinventory

Predictable development

Release 1

Release 2

Release 3

Release N

constant time

, Work done right.+ Work done.

fin