Lifestyles of the rich and frameworkless

1. © Equal Experts UK Ltd 2014 1
estyles of the Rich and Frameworkles

2. © 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 talk
Besides, where's the fun in that...?
Solve all the Problems
Throw everything in one big file and call it a library
Design things strictly according to my own opinions
Build a framework

3. © 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 level
Bootstrapping 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

4. © 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

5. © Equal Experts UK Ltd 2014 5
Introduction
Agenda | What I AM going to do
Live coding
Summary

6. © Equal Experts UK Ltd 2014 6
Personal reasons
Learn how frameworks hang together
Gain a greater understanding of how they achieve their goals
Measure the performance implications of certain approaches
Question the status quo, innovation comes from trying something new
Rolling your own javascript code is a lot of
FUN!

7. © Equal Experts UK Ltd 2014 7
Disclaimer
Security
Build tooling
Data-binding
NEVER do these things yourself

8. © Equal Experts UK Ltd 2014 8
Now | The fun stuff
Live coding
RoutingData-binding
(yes yes, I know what I said)
Templating

9. © Equal Experts UK Ltd 2014 9
Now | The fun stuff
Demo: Data-binding

10. © Equal Experts UK Ltd 2014 10
Data-binding - Goals
Propogate changes from the DOM to a model, and vice versa
Explicit syntax - no content parsing, special attributes etc
Use a plain old javascript viewmodel, no special types.
Bind to variables or functions – explicitly specify dependencies
Support 'Two-way' binding

11. © Equal Experts UK Ltd 2014 11
Now | The fun stuff
Demo: Templating

12. © 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 model
Make use of Web Components new template tag.
Support data binding within templates

13. © Equal Experts UK Ltd 2014 13
Now | The fun stuff
Demo: Routing

14. © 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.

15. © Equal Experts UK Ltd 2014 15
Routing - Goals
Capture parameters, and execute a handler when the hash changes
Make use of operator overloading to define routes that we can hold
references to.
Work with routes that are composed hierarchically
Work with immutable data structures
Determine a path through the graph, create a sequence, then left-fold to
produce a handler and a set of parameters.

16. © Equal Experts UK Ltd 2014 16
Summary | Well that was pretty simple...
Summary

17. © 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)

18. © Equal Experts UK Ltd 2014 18
Summary | However...
We learned a lot doing this
It'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 magic
Frameworks may contain a lot of code, but they can
be read, understood and reasoned about.

19. © 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 earlier
http://superscribe.org/graphbasedrouting.html
Superscribe 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!

20. © Equal Experts UK Ltd 2014 20
Twitter
@roysvork
Web
http://roysvork.wordpress.com
Thank you for listening!
Code on Github
github.com/roysvork/frameworkless