lifestyles of the rich and frameworkless

© Equal Experts UK Ltd 2014 1

Lifestyles of the Rich and Frameworkless

@roysvork

Pete Smith

[email protected]


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


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


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


Introduction

Agenda | What I AM going to do

Live coding

Summary


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!


Disclaimer

SecurityBuild toolingData-binding

NEVER do these things yourself


Now | The fun stuff

Live coding

RoutingData-binding(yes yes, I know what I

said)

Templating


Now | The fun stuff

Demo: Data-binding


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


Now | The fun stuff

Demo: Templating


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


Now | The fun stuff

Demo: RoutingAdvanced


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.


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.


Summary | Well that was pretty simple...

Summary


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)


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.


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!


Twitter@roysvork

Webhttp://roysvork.wordpress.com

Thank you for listening!

Code on Githubgithub.com/roysvork/frameworkless

lifestyles of the rich and frameworkless

Technology