java script you can live with

JavaScript You Can Live WithWriting code like Amazon and Google developers#livingwithJS

2

Hi! I’m Peter

peter.vogel@phvis.com @phvogel http://blog.learningtree.com/category/ux/ PH&Vinformation services

3

What’s Your Job?

4

The Problems

Trying to insert new functionality You’re usually modifying an existing page

Figuring out where to make the change And, of course, what the change should be

Making a change Without three other things blowing up

5

My Assumptions

You don’t have time/support to Learn a new technology Change your whole development style

You’d prefer to enhance what you’re doing now

6

What I’m Going to Do

Tweaks to what you do (3)

Things you can consider enhancing (5)

REVOLUTION! (3)

Two shameless plugs AND Finish with a hashtag, a haiku, and a Beatles quote

7My Family My Dog

8

ego.com Compulsive reader Independent consultant: PH&V Information Services

19 years without a job Technical writer/editor UX designer Instructor/Instructional designer

30+ years writing code

9

Clients

10

Shameless Plug for Me

11

Tweaks to What You DoWriting code like Amazon and Google Developers

13

The Fundamental Changes

Code is not “a means to an end”

Code is a resource for the organization

You don’t screw with working code (family version)

14

Code is Not English Inherently difficult to read

You must avoid “expedient” code That only gets the job done

Write for the “next programmer” Who, in six months, will be you

15

1. Write to be Read

Write your code expressively

Eloquent Code, literate code , readable code

Really Obvious Code ROC Rocks!

16

AND

The Difference Between$(function () {$("#txtFN").keyup(clear);

var FirstNameTextBox = $("#txtFirstName")

$(function () {FirstNameTextBox.keyup(clearEverythingButNames);

17

2. Comments At least, not inside functions

Don’t try to fix the problem with English sentences Comments are an apology for unreadable code What you should now consider bad code

Comments either Repeat what the code should say (redundant) Disagree with the code (ruinous)

Only useful if Complete, accurate and maintained

Comments take time away from writing good code

: Don’t

18

Comment on Functions

Comment why you felt you need this function

Better Yet: Give the function a very good name Write to express your intent

19

AND

The Difference Between$(function () {// On keyup call clearNames function (or clearOther)FirstNameTextBox.keyup(clearNames);LocationTextBox.keyup(clearLocation);}

//When user enters some search criteria, we’ll clear the other criteria not chosen$(function () {FirstNameTextBox.keyup(clearEverythingButNames);LocationTextBox.keyup(clearEverythingButLocation);}

20

3. Coding Styles Have one Develop lots of conventions

Follow them rigidly Adopt/adapt your development tool’s conventions

First reason: Just like UX design patterns tell users what to do next Conventions tell the next programmer about your code

Second Reason: Makes you think about how you’re writing your code Instead of what you want it to do

Third reason Makes deviations stand out

21

AND

The Difference Between//When user enters some search criteria we’ll clear the//other criteria not chosen$(function () {FirstNameTextBox.keyup(clearEverythingButNames);LocationTextBox.keyup(clearEvrythingButLocations);}

//When user enters some search criteria// we’ll clear the other criteria not chosen$(function () { FirstNameTextBox.keyup(clearEverythingButNames); LocationTextBox.keyup(clearEverythingButLocation); }

What You Could ConsiderWriting code like Amazon and Google Developers

23

1. Use a Tool to Check Your Code Yes, you’ll lose time getting/integrating it, learning

what its’ telling you You’ll get all back in the first 200 lines of code

24

Tools to Check Your Code

ESLint To look for errors and common mistakes

25

And Check Your Style, Too

JSCS To enforce your coding style Comes with presets: Adopt one

26

2. Live and Die by the SRO

Single Responsibility Principle Each function does one thing and one thing well Each prototype/object does one thing and one thing well

If you have a function more than 30 lines long You probably don’t know what it’s doing A 15 line function is automatically better than a 30 line

function

Fallout: Lots and lots of simple objects/protoypes

27

AND

The Difference Between$(function () { $("#txtFN").keyup(clear); $("#txtLastName").keyup(clearNotNames); $("#txtStudentID").keyup(clearNotStudentId); $("#cmbOffice").change(clearNotOfficeList); $("#btnClearForm").click(clearForm); $("#btnSearchByName").click(studentSearch); hideResults(); clearNames(); clearStudentId(); clearOfficeList(); hideResults(); var searchTermOffice = $("cmbOffice").val(); $.getJSON(url + searchTermOffice, processStudents); hideResults(); var fname = $("#txtFirstName").val(); var lname = $("#txtLastName").val(); var oname = $("#cmbOffice").val(); var sId = $("#txtStudentID").val();

if (oname != "") { var localUrl = url + "ByOffice" + "/" + oname; } else if (sId != "") { var localUrl = url + "ById" + "/" + sId; } else { if (fname == "") { fname = "_"; } var localUrl = url + "ByName" + "/" + fname + "/" + lname;

} $.getJSON(localUrl, processStudents); switch (students.length) { case 0: displayNoResult(); break; case 1: displayStudentInfo(students); break; default: displayStudentList(students); } }; alert("No matching students found.") $("#studentInfo").show(); var student = students[0]; $("#EmailAddress").html(student.email); $("#ShareName").html(student.networkShare); $("#StudentName").html("<strong>" + student.name + "</strong>"); $("#UserName").html(student.id); var student; var row; $("tr[data-rowstate='added']").remove();

$("#resultTable").show(); for (stu in students) { student = students[stu]; row = "<tr data-rowstate='added'>" + "<td>" + student.name + "</td>" + "<td>" + student.id + "</td>" + "<td>" + student.email + "</td>" + "<td>" + student.networkShare + "</td>" "</tr>"; $("#resultTable").append(row); }

$(function () { $("#txtFirstName").keyup(clearNotNames); $("#txtLastName").keyup(clearNotNames); $("#txtStudentID").keyup(clearNotStudentId); $("#cmbOffice").change(clearNotOfficeList); $("#btnClearForm").click(clearForm); $("#btnSearchByName").click(studentSearch);});

function clearForm() { hideResults(); clearNames(); clearStudentId(); clearOfficeList();}

function clearNotNames(){ hideResults();

28

3. Design Patterns

Conventions for structuring code

Assemble complex behavior out of lots of simple pieces

Where you need to do something complicated, write a function that calls other functions The Façade pattern

Eliminate bugs by eliminating/centralizing logic: if/else, switch Strategy, role, state, factory

29

AND

The Difference Between$function studentSearch() { if (oname != "") { var localUrl = url + "ByOffice" + "/" + oname;} else if (sId != "") { var localUrl = url + "ById"...} else { if (fname == ""){ fname = "_"; } var localUrl = url + "ByName" + "/" + fname + "/" + lname; } $.getJSON(localUrl, processStudents);

function studentSearch() { var buildUrlForSearch =

selectUrlBuilder(fname, lname, oname,sid); var localUrl = buildUrlForSearch(); $.getJSON(localUrl, processStudents);

31

4. Refactor

After It Works: You’re Smarter So don’t Stop!

Refactor it! Changes to code that don’t change functionality But make the code better written

33

AND

The Difference Between$(function () { FirstNameTextBox.keyup(clearEverythingButNames); LocationTextBox.keyup(clearEverythingButLocation); }

$(function () { FirstNameTextBox.keyup(ClearCriteriaNotChosen(

FirstNameTextBox)); LocationTextBox.keyup(ClearCriteriaNotChosen(

LocationTextBox));}

34

5. Every Week: Get Knowledge Set aside one half-hour to not build anything

Instead, learn something you don’t need to finish this page

Learn the language Work through a book about JavaScript Most of us just learn what we need for the next piece of

functionality

Learn your tool Google “Cool tip for my development environment”

Now, He’s Just Being SillyWriting code like Amazon and Google Developers

36

Consider

1. A Databinding Framework + the MVVM Design Pattern

2. Automated Unit Testing (and Test Driven Development?)

3. TypeScript

37

1. MVVM Model View ViewModel

Alison Tinker called it the Page Object Pattern

ViewModel JavaScript object with all functionality for a page Properties for the data/Functions for the actions Bind the properties to elements Wire up the functions to the events

Everything happens inside the ViewModel User enters text: Your property is updated You change a value: The element is updated

38

39

2. Automated Unit Tests Prove your code does what you think it does

Want to test some code? Set some property (properties) Call a function Check some other property (properties)

Only way to reduce the time spent on testing:Don’t test at all

Alison Tinker went one step beyond in her presentation on E2E testing: Testing 1-2-3

40

41

3. TypeScript Get the slides from Micheal Szul’s and Ashish

Pathak’s presentation: The New JS Applies conventions built into the compiler Lets you structure your code expressively Supports implementing many design patterns Finds problems as you type them in Won’t let you run the code until you’ve thought about

the problem

42

Shameless Plug for One of My Friends

43

Summing Up Really Obvious Code! Conventions Comment only for purpose Single Responsibility Principle + Patterns Refactor! Get more tools

ESLint (JSHint), JSCS, KnockoutJS, Set aside time to learn your language/learn your editor

44

The Fundamental Haiku

How you write your codeWill matter more to you thenWhat your code will do

And, in the end

#ROCrox!

45

46

Thank You!

peter.vogel@phvis.com@phvogelhttp://blog.learningtree.com/category/ux/

Don’t forget SpeakerRate Slides on

EdUIconf.org/speakerdeck/sildeshare