Coming up:

• Show Me What You Got!

• Call that a knife?

• There and Back Again: Our SatNav

• You don't have to go home...

• Shirts & Skins: Pick a side

• America: What Went Wrong?

• Episode IV: A New Hope

• Tweeldledum and TDD

• A Place To Call Our Own

SHOW ME WHAT YOU GOT!

YOU CALL THAT A KNIFE?

...This is a knife!

Choosing a framework

• Popularity

• Familiarity

• Ease of use

• Performance

• Support

• Developer cost / ease of hiring

• Ember

• Vue

• Angular

• React

Popularity

2018 Frontend Tooling Survey

Popularity

2018 Frontend Tooling Survey

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

• One answer per respondant

• Each framework totals 100%

• Used / Comfortable using is relevant

• React makes the strongest showing

• Surprisingly strong response for Vue

Popularity

2018 Survey

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

• Reinforces results from previous chart

• Further confirmation for React

• Only React has more saying 'Comfortable'

• Possibly easier to find experienced React developers

Used + Comfortable

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

• Large increase in React users saying they are comfortable with it

• Big jump from 'Heard of'

Popularity

2018 Survey

Year on year change

• Large increases for Vue.js

Popularity

Annual ‘State Of JS’ Survey

https://2017.stateofjs.com/2017/introduction/

• Oh look.  It's React all over. What a surprise.

Popularity

Google Trends

https://2017.stateofjs.com/2017/introduction/

• Trends in frequency of keyword searches

• Results generally match expectations with one exception

• Google mysteriously ranks their own framwork higher than anyone else.  I call shenanigans!

Past 12 months

Popularity

Google Trends

https://2017.stateofjs.com/2017/introduction/

• Angular was released in 2010

• Ember was released in 2011

Previous 5 years

• React was released in 2013

• Vue was released in 2014

Popularity

github activity

Popularity

Issues on github

• Angular: High numbers likely related to age of framework. Very high number still open

• React: Proportionally few open issues

• Ember/Vue: Disproportionately high numbers for the number of users. Possibly reflecting less community support outside of Github?

• Vue: Surprisingly few open issues for high number of questions. Indicative of very  active support community?

Popularity

github contributors

• Angular: Low numbers considering age of the framework

• Other results inline with expectations

Popularity

stars & forks on github

• Stars are like 'Likes' on social media

• Forks: Copies made by developers to add features

• Results fit expectations bar the insane popularity of Vue. People LUUUURVE Vue...

Popularity

github stats reliability

Familiarity

• Modicum of 'modern' Angular experience 

• Reasonable total experience

• Experience on a variety of projects

• Hybrid experience not directly applicable

• Experience not recent

• Experience often how NOT to do Angular

Personal experience

• More recent experience

• Work not proven in production

• Experience is limited

• Full red-green-blue TDD experience, with  Redux state management

Familiarity

Personal experience - conclusion

Familiarity

Team survey

• Almost everyone on the team does at least some front-end work, so their opinions hold at least some weight!

Do you do front end work at Datix?

Familiarity

Team survey

Would you be happy to be involved in FE work with a framework

Familiarity

Team survey

• Very even split, slightly in favour of React

Familiarity

Team survey

• That's a definite preference for React

Given the option would you prefer Datix to use Angular or React?

Familiarity

Team survey

Can you elaborate on your previous answer?

Familiarity

Team survey

Conclusions

• I didn't rig the survey or the results

• No, honestly, I didn't!

• It's React. Again. Always React...

Performance

operational  benchmarks

https://github.com/krausest/js-framework-benchmark

Other important factors

• Both frameworks claim to make development simple and quick

• Both can get complicated when creating components and applications

• My experience and team feedback suggest React is the easier to use.

• Both frameworks continue to be supported by major organisations

• Both are widely supported on stackoverflow, online tutorials, and through official and third party extensions and libraries

• Demand for React developers keeps rates higher than for Angular

• While there seems to be a larger pool for React devs, the demand makes finding and retaining them a challenge 

A place to call our own

the component library

• Use an existing UI library as starting point for further devlopment

• Many such libraries exist, let's compare them!

• Ha! The look on your face...

the component library

• Agnostic, but has React version

• Simple clean style, east to adapt

• Clear class naming, inheritance, CSS/Less/SASS variables

• Base components are good match

• Easily support a11y through React

semantic ui components sample

A living style guide

• More than a library, documentation

• How components look and how they are implemented 

• Code onscreen extracted from live files 

• Changes immediately update library

• Basic implementation already exists

There and Back Again:

Automated SatNav for projects 

Lets take a closer look...

The roadmap

Sat nav is great, but where are we going to?

Setup, initial components and first pages

• Four sprints
• Implement living styleguide
• Create initial components required for  first pages
  -Text display field -Button -Select -Typeahead select
• Provides components for first 12 pages - complete as many as possible

Text

Three month map

• Based on velocity, project for next three months
• Split pages and components by sprint
• Rinse and repeat

Tweedledum & TDD

clean code that just works

Benefits of TDD

• Devs focus on what is required of code

• Test process creates technical specification

• Reduced time spent debugging

• Reduced refactoring time

• Eliminate regression from inadvertently  breaking other code

• Confidence to make deep changes

https://apiumhub.com/tech-blog-barcelona/advantages-of-test-driven-development/

• Initial overhead cost provides increased returns by shortening development and eliminating the bug cycle

• Short iterations mean fast feedback

ELIMINATE THE BUG CYCLE!

NEXT LEVEL TESTING

• Automated functional testing
  Test components in UI
  Check interaction between components
  Ensure user journeys are operational and consistent
  Potential for QA to expand further into automated testing

• Visual Diff Testing
  Automated screenshots compared to UI designs
  Prevent visual regressions

Title Text

• Lack of single authority

• Unclear or incomplete specifications

• Incomplete  wireframes

• Scope creep

• Regressions

• Failure to meet requirements

EPISODE IV: A NEW hope PROCESS

• Redefined development flow

• Rigorous adherence to requirements

• Avoid ambiguity in development

• Reduce or eliminate most bugs

• High confidence before QA promotion

• Enable QA to be increasingly proactive

• Near continuous development

Product

Sponsors

• Change requests must go through Product Manager or Owner

• Bug reports and AC failures must be triaged before re-entering the queue

• All tasks, changes and bugs must conform to ticket templates

Bureaucracy  will save us all!

No really, it will.

• Lack of single authority

• Unclear or incomplete specs

• Incomplete  wireframes

• Scope creep

• Regressions

• Failure to meet requirements

• Lack of single authority

• PO keeps request queue clean

• Unclear or incomplete specs

• Adherence to template format

• Incomplete  wireframes

• Required by templates

• Scope creep

• Strict change request flow

• Regressions

• TDD and coding standards

• Failure to meet requirements

• Clear requirements and TDD

SUCCESS:

You don't have to go home...

but you can't stay here

Bye!

Miss you already.