Exciting Front-end Platform Activities

improving FE developers productivity

(and happiness :)

Improved productivity through

Improved productivity through

better code quality and consistency

Improved productivity through

better code quality and consistency

more efficient workflow

Improved productivity through

better code quality and consistency

more efficient workflow

modularised code

Improved productivity through

better code quality and consistency

more efficient workflow

modularised code

test-driving new features

Improved productivity through

better code quality and consistency

more efficient workflow

modularised code

test-driving new features

 

overall: reducing tech debt

how do we get there?

how do we get there?

assessed where we are today

how do we get there?

assessed where we are today

discussed where should we get to

how do we get there?

assessed where we are today

discussed where should we get to

prioritised improvements

how do we get there?

assessed where we are today

discussed where should we get to

prioritised improvements

set up actions

how do we get there?

assessed where we are today

discussed where should we get to

prioritised improvements

set up actions

started with the first one :)

priorities

priorities

single and efficient FE dev workflow

priorities

single and efficient FE dev workflow

new standards and approaches

priorities

single and efficient FE dev workflow

new standards and approaches

improved automated tests and coverage

priorities

single and efficient FE dev workflow

new standards and approaches

improved automated tests and coverage

faster, more stable CI builds

priorities

single and efficient FE dev workflow

new standards and approaches

improved automated tests and coverage

faster, more stable CI builds

release FE changes independently

priorities

single and efficient FE dev workflow

new standards and approaches

improved automated tests and coverage

faster, more stable CI builds

release FE changes independently

first achievements

first achievements

we are now enabled to

first achievements

we are now enabled to

 

modularise our Javascript code (ES6 imports)

first achievements

we are now enabled to

 

modularise our Javascript code (ES6 imports)

write ES6 code complying our standards (ESlint, babel)

first achievements

we are now enabled to

 

modularise our Javascript code (ES6 imports)

write ES6 code complying our standards (ESlint, babel)

test-drive new features (Karma, Mocha, Chai)

first achievements

we are now enabled to

 

modularise our Javascript code (ES6 imports)

write ES6 code complying our standards (ESlint, babel)

test-drive new features (Karma, Mocha, Chai)

bundle our assets more efficiently (webpack)

first achievements

we are now enabled to

 

modularise our Javascript code (ES6 imports)

write ES6 code complying our standards (ESlint, babel)

test-drive new features (Karma, Mocha, Chai)

bundle our assets more efficiently (webpack)

get immediate feedback on changes (wds, hmr)

demo time!

what's next?

what's next?

utilising our new FE workflow, we will be able to

 

what's next?

utilising our new FE workflow, we will be able to

 

significantly improve code quality

 

what's next?

utilising our new FE workflow, we will be able to

 

significantly improve code quality

decouple FE / BE code

 

what's next?

utilising our new FE workflow, we will be able to

 

significantly improve code quality

decouple FE / BE code

speed up FE development

 

what's next?

utilising our new FE workflow, we will be able to

 

significantly improve code quality

decouple FE / BE code

speed up FE development

 

whilst preserving important business values

what do we need to get there?

what do we need to get there?

utilise the graciously given time for platform work :)

 

what do we need to get there?

utilise the graciously given time for platform work :)

render our pages on the server using Javascript

 

what do we need to get there?

utilise the graciously given time for platform work :)

render our pages on the server using Javascript

introduce SonarQube Javascript analysis

 

what do we need to get there?

utilise the graciously given time for platform work :)

render our pages on the server using Javascript

introduce SonarQube Javascript analysis

create a separate, fast FE build pipeline

 

what do we need to get there?

utilise the graciously given time for platform work :)

render our pages on the server using Javascript

introduce SonarQube Javascript analysis

create a separate, fast FE build pipeline

revise our test suites and testing strategy

results on the long run?

shorter response time

rolling out new changes quicker 

more confidence

happier users

 

improved DX!

(Developer eXperience)

thanks

alex

dario

paul

kristian

javi

Made with Slides.com