lifestyles of the rich and frameworkless

© Equal Experts UK Ltd 2014 1

Lifestyles of the Rich and Frameworkless

@roysvork

Pete Smith

roysvork@gmail.com

© Equal Experts UK Ltd 2014 2

Evangelise

Agenda | What I'm NOT going to do

Frameworks are GREAT!You're more awesome if you don't use frameworks!

Too many for just the one talkBesides, where's the fun in that...?

Solve all the Problems

Throw everything in one big file and call it a libraryDesign things strictly according to my own opinions

Build a framework

© Equal Experts UK Ltd 2014 3

Why should you use a Framework?

Shared experience: Your team may have been using a framework for years and have great experience, why change now?Ease of hiring: The more popular the framework, the more people will have exposure to it at the required skill levelBootstrapping your MVP: If you're working to secure your next round of venture capital funding, you want something that works out of the box.Speed of development (sooner): All the documentation and training materials you need are already written and you're ready to go

Frameworks are great when time is sparse

© Equal Experts UK Ltd 2014 4

Why should you go it alone?

Specific needs: In a large organisation, infrastructure may need to serve multiple teams with requirements particular to your domain.Fine grained control: You can't perform delicate surgery even if you do have the best swiss army knife.Knowledge gaining: If your company can afford to spend the time doing so, building things from scratch is a great way to learn.Speed of development (later): Once things are built, with a team full of experts you can focus on delivering value to your customers.

Build from scratch in mature organisations

© Equal Experts UK Ltd 2014 5

Introduction

Agenda | What I AM going to do

Live coding

Summary

© Equal Experts UK Ltd 2014 6

Personal reasons

Learn how frameworks hang togetherGain a greater understanding of how they achieve their goalsMeasure the performance implications of certain approachesQuestion the status quo, innovation comes from trying something new

Rolling your own javascript code is a lot of FUN!

© Equal Experts UK Ltd 2014 7

Disclaimer

SecurityBuild toolingData-binding

NEVER do these things yourself

© Equal Experts UK Ltd 2014 8

Now | The fun stuff

Live coding

RoutingData-binding(yes yes, I know what I

said)

Templating

© Equal Experts UK Ltd 2014 9

Now | The fun stuff

Demo: Data-binding

© Equal Experts UK Ltd 2014 10

Data-binding - Goals

Propogate changes from the DOM to a model, and vice versaExplicit syntax - no content parsing, special attributes etcUse a plain old javascript viewmodel, no special types.Bind to variables or functions – explicitly specify dependenciesSupport 'Two-way' binding

© Equal Experts UK Ltd 2014 11

Now | The fun stuff

Demo: Templating

© Equal Experts UK Ltd 2014 12

Templating - Goals

Reusable single templates that allow you to 'stamp out' functionality.Repeating groups that support iterating over data in a modelMake use of Web Components new template tag.Support data binding within templates

© Equal Experts UK Ltd 2014 13

Now | The fun stuff

Demo: RoutingAdvanced

© Equal Experts UK Ltd 2014 14

Routing as a state machine

Routes are stored as a graph, that is a series of nodes connected by edges

As we traverse the graph, segments are matched, consumed, and possibly captured for use as parameters.

© Equal Experts UK Ltd 2014 15

Routing - Goals

Capture parameters, and execute a handler when the hash changesMake use of operator overloading to define routes that we can hold references to.Work with routes that are composed hierarchically Work with immutable data structuresDetermine a path through the graph, create a sequence, then left-fold to produce a handler and a set of parameters.

© Equal Experts UK Ltd 2014 16

Summary | Well that was pretty simple...

Summary

© Equal Experts UK Ltd 2014 17

Summary | It's not all sun and rainbows...

These implementations have a LOT of flaws

Security – None.Test Coverage – Zero. Performance – Not measured, presumably not great.Error handling – What's that?Browser compatibility – ECMAScript 5.1 (apart from template tag)

© Equal Experts UK Ltd 2014 18

Summary | However...

We learned a lot doing thisIt's simple – By leaving out some of the syntactic sugar and quality of life aspects, we can clearly see the base functionality in action.It's extensible – This code is a great starting point for your own learning, or even for a mature project where you need control over infrastructure.

It's not magicFrameworks may contain a lot of code, but they can be read, understood and reasoned about.

© Equal Experts UK Ltd 2014 19

Summary | Further reading

D.I.Y.js – A different taken on dependency injection https://github.com/Roysvork/D.I.Y.js/Graph based routing – More information about the approach we looked at earlierhttp://superscribe.org/graphbasedrouting.htmlSuperscribe JS – More complete client side routing implementation (no docs)https://github.com/Roysvork/Superscribe.js

Have a play, and let me know how you get on!

© Equal Experts UK Ltd 2014 20

Twitter@roysvork

Webhttp://roysvork.wordpress.com

Thank you for listening!

Code on Githubgithub.com/roysvork/frameworkless