Back to Basics The importance of testable modular JavaScript components.

Why are we talking about basics? We write a lot of Javascript…

Why are we talking about basics? We write a lot of Javascript… ...but our language doesn’t update much…

Why are we talking about basics? We write a lot of Javascript… ...but our language doesn’t update much… ...and this happens far too often:

Agenda All of the things!

Agenda 1. Modular Components a. What are module components? b. Why do we want modular components? c. How do you create modular components?

2. Testable Code a. What is Test Driven Development? b. How do you test your components? c. When do you start testing your code?

Ground Rules

1. Keep this interactive! ○ Ask questions! ○ Offer opinions! ○ Throw things!

Modular Components The whole point of this presentation.

What are modular components?

Let’s ask this a different way... What do jQuery Plugins, Angular Directives, Knockout Components, and Ext JS classes all have in common?

Let’s ask this a different way... ● Obviously it's NOT the pattern... ○ MVC, MVVM, MVP, MVW

● It's NOT object orientation. ○ (Prototypical or otherwise)

● It's NOT declarative bindings. ○ (Although we WILL talk about this later!)

Let’s ask this a different way... What do jQuery Plugins, Angular Directives, Knockout Components, and Ext JS classes all have in common? ...the answer is: Modular Components!

What are modular components? ● It’s the best practice that unites all of the modern JavaScript frameworks. ● It’s the type of controls that Bootstrap and Foundation offer right out of the box. ● They are atomic, reusable, controls that are more than just “scripts” to be used on a per page basis.

Why do we want modular components? ● Makes your code reusable. ○ Reduces your code base. ○ Reduces the chance of bugs. ○ Gives you opportunity to polish your controls.

● Makes you write better code. ○ Makes you consider your dependencies. ○ Makes your code easier to test.

Why do we want modular components? ● Streamlines your UX process. ○ Creates a common vocabulary for controls. ○ Enables adoption of new features.

How do you create modular components?

Let’s look at some code! ...and there was much rejoicing.

Testable Code Assert

What is Test Driven Development?

What is Test Driven Development? ● My Personal Goals ○ Make it so that you can test your code without ever firing up your application. ○ Start out by authoring ONE test per component/feature/service, and grow from there. ○ Ability to easily add tests as bugs are discovered.

How do you test your components? ● Obvious Answers ○ Unit Tests ○ Integration Tests

● Correct Answers ○ Make it easy to write tests! ○ Make it easy to run tests!

When do you start testing? ● Obvious Answers ○ Now ○ Yesterday

● Correct Answers ○ At the start of your project, set up the tooling! ○ Every time you write something new!

How do test your components?

Let’s look at some more code! ...and there was much rejoicing.