Javascript Tooling



Javascript Tooling

1 2


js-tooling-talk

JavaScript Tooling - Love Your Development Workflow

On Github jpeterson / js-tooling-talk

Javascript Tooling

Love your Development Workflow!

Josh Peterson

Thanks for coming? :: brief-but-witty banter ::

Background

I'm a developer at

I live in

I'm from

My name is Josh

I'm a developer here at Esri

Professional Services, build JS apps everyday

I currently live in Washington, DC and work in Esri's regional office there

But my home is the greatest place on earth: Colorado

"JavaScript is hard"

Why?

JS is hard. The reason I put this talk together is because I hear this a lot. JS apps are more time-intensive, therefore more expensive. I happen to disagree with these notions... but why?

Because of these?

No, not really (well, mostly)

Is JS hard becuase of advanced concepts? Because you have to learn HTML and CSS Because the standard is a "Moving target" Usually, no. It's much more simple

Because

JS workflows are unopinionated.

(unlike JS developers...)

  • Where's my IDE?
  • Which framework is "best"?
  • How/why do I "build"?
  • No really, where's my IDE?
JavaScript is unopinionated This leads to a lot of questions Unlike Flex/Silverlight/Java/WPF, there is no standard IDE You lose your 'Build' button You lose your 'Run in debug mode' button A lot of JS code on the web was written by 3 kinds of people 1. JS devs 2. Devs dedicated to other languages 3. Non developers This leads to misinformation and confusion
Drinking game: 

1. Come up with a noun or verb
2. Add a .js to your word and google it
3. If you found a library, drink
						

Tools Save the Day!

Tools solve our workflow problem

Tools solve our workflow problem! The JS tooling ecosystem has exploded.

Writing Code

Sublime Text / WebStorm / Atom

Now I'm going to briefly set up the demo by pinpointing some workflow problems solved by tools

Writing code - is there a "right" JS editor?

Yes and no. Find the editor that does what you need, keep in mind some were made for web development

Visual Studio and Eclipse are okay... but theres a lot of overhead and junk that you'll never use

Syntax Errors

JSHint / JSLint

Since JS doesn't compile until runtime, its hard to identify "pre-compilation" errors

Syntax errors, undefined variables, typos

Dependency Management

Bower

For smaller JS projects you may not need dependency management

But as your projects grow in size, you'll be lost without it

CSS is not code

Stylus / SASS / LESS

To developers, CSS can be a bit of a curveball

It's not code, it can be very repetetive and theres a lot of typing and bloat

Task Automation

Grunt / Gulp / CodeKit / Mixture

Now that we know all these great things we can and should be doing, how do we do them efficiently?

Did we just add a ton of effort to our workflow with each of these tools?

Demo Time!

So thats the end of the build-up

We've identified a problem: "JavaScript is Hard"

We think we know why: Unopinionated Workflow, don't know what tools to use

Let's take a look at how some of these tools work...

Questions?

jpeterson@esri.com

@jm_peterson