What is a JavaScript Library/Framework? – Why are they so many? – Why is that a problem?

View Github Repository Open presentation in a new window

avladimirov

See all presentation from avladimirov

What is a JavaScript Library/Framework? – Why are they so many? – Why is that a problem?

0 0

jsNext2014

On Github avladimirov / jsNext2014

lang: [BG] | [EN]

var title = "iPhone 6 for Android lovers"

var title = "You don`t need a framework for that!"

                        var author = {  
                                        name: 'Adriyan Vladimirov',
                                        company: 'SBTech',
                                        roles: ['TL/Manager', 'Programmer'],
                                        technologies: ['web', '.NET']
                                     }

Agenda

  • Frameworks and Libraries
  • So you have to pick one?
  • Layout and interactions without a single JS line
  • Summary

What is a JavaScript Library/Framework?

Everything is a library

Pre-written javascript that solves a specific need

wikipedia /JavaScript_framework forwards to .. library

Framework is about design

It cannot solve a real task.

Framework is full-stack

  • Flow of control
  • Design patterns
  • Coding standards
  • Default behaviour
  • Extensibility

Library to a Framework is like

Brick is to an Arcitectural Plan

Why are they so many?

How many?

Wiki library listing - 70+ in 10 categories

Wiki framework comparison

GitHub repos in javascript

Client side 'web' applications have always been here

Tired of this?

How about this?

That was a promising one..

Yet what about global populatiry for last decade (by TIOBE)

Google Search trends for last 10 years

However - last year in BG

Increased adoption of W3C specifications

Chromium features adoption

Leads to new libraries

low level specs to high level API

Growing codebase

Good projects evolve but get overcomplicated

Leads to new smaller replacements

  • Modernizr -> head.js
  • Moment.js -> Xdate.js
  • ...

.. and many others

Not invented here - paradigm

  • Lack of control and prediction
  • High expectations of quality and support
  • Psychological phenomenon - unwillingness to value the work of others and adopt anywhing with foreign origin

Why is that a problem?

Paradox of choice

Elliminating choices reduces anxiety and increases turnover

Choice and Happiness

  • Abundance of choice often leads to depression
  • One needs to be satisfied with his choice
  • Spontaneous selection brings more satisfaction

Freedom or Commitment

Too many options will require more analysis and therefore I quit

Missed opportunities

Considering trade-offs brings negative emotion

On overall this leads to lower adoption of existing solutions.

What others do?

Raise of the giants

  • Google - angular.js / WebComponents
  • Microsoft - knockout.js / TypeScript
  • Twitter - Bootstrap Platform
  • Adobe - WebPlatform / Edge Animations
  • SAP - OpenUI

Going Open Source

Even .NET is following..

Listen to the community

So what do we do?

when we get a new task..

We analyze and rationalize

Weighting the options to integrate a library or go from scratch

What to consider?

Pros Cons Solve common problems API overload Minimize time & effort Learning curve Browser coverage Performance overhead Maintenance & Support Customizations effort Consistency in: coding & design No control over the internals (fork it)

What to look for?

  • Task(s) correlation
  • Documentation & Roadmap
  • Community & Support

Arguable sides

  • Transport (size) & load time overhead (initialization)
  • Performance overhead
  • Evolution - versioning

How to find a good one?

Relevancy check

Most reliable - hosted on CDNs

Most reliable - hosted on CDNs

What else is there?

Interaction and dynamics

Interaction is switching between visual states

Using pseudoes to separate states

In combination with ~ and + to operate on DOM Tree

:checked and mate

Checkboxes & radiobuttons

Layout Transitions

See the Pen Alternative Layout Transitions with Pure CSS by SitePoint (@SitePoint) on CodePen.

CSS Slide Nav

See the Pen Pure CSS Slide Nav by SitePoint (@SitePoint) on CodePen.

Show/Hide content

See the Pen CSS Only Content Toggle by Trevan Hetzel (@trevanhetzel) on CodePen.

:target

Activated on an element when the URL hash is the same as an element’s ID

http://localhost/index#jsnext
#jsnext:target { color: orange; }

Modals with :target

See the Pen CSS Modal by Trevan Hetzel (@trevanhetzel) on CodePen.

Slideout menu

See the Pen CSS Off-Canvas w/ :target by Trevan Hetzel (@trevanhetzel) on CodePen.

Not yet recommended

  • Complex and fragile CSS
  • Difficult to maintain
  • Remember separation of concerns

Even though transitions and more performant than absolute alignments

Layouting

boostrap css anyone?

Flexbox

Layout mastery

Holly Grail

See the Pen Demo Flexbox 3 by Hugo Giraudel (@HugoGiraudel) on CodePen.

Flexible Navigation

See the Pen Bar Navigation with Flexbox and SVG icons by Chris Coyier (@chriscoyier) on CodePen.

Quick and Dirty

Takeaway

A quick summary

Whenever possible -

learn and use some popular framework

  • Best approach to understand Design Patterns
  • Easier to land a job

Whenever capable -

build and share yours

  • Research alternatives
  • Document & Support it

Whenever curious -

research alternatives

  • Make better decisions & predictions
  • Nice discussion topics with colleagues

Questions?

No time left :(

What is used to build this presentation?

  • Reveal.js
  • head.js
  • highlight.js
  • markdown.js
  • zoom.js

Thank you!