Java script you can live with
-
Upload
peter-vogel -
Category
Software
-
view
19 -
download
0
Transcript of Java script you can live with
![Page 1: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/1.jpg)
JavaScript You Can Live WithWriting code like Amazon and Google developers#livingwithJS
![Page 2: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/2.jpg)
2
Hi! I’m Peter
[email protected] @phvogel http://blog.learningtree.com/category/ux/ PH&Vinformation services
![Page 3: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/3.jpg)
3
What’s Your Job?
![Page 4: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/4.jpg)
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
![Page 5: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/5.jpg)
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
![Page 6: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/6.jpg)
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
![Page 7: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/7.jpg)
7My Family My Dog
![Page 8: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/8.jpg)
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
![Page 9: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/9.jpg)
9
Clients
![Page 10: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/10.jpg)
10
Shameless Plug for Me
![Page 11: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/11.jpg)
11
![Page 12: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/12.jpg)
Tweaks to What You DoWriting code like Amazon and Google Developers
![Page 13: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/13.jpg)
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)
![Page 14: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/14.jpg)
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
![Page 15: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/15.jpg)
15
1. Write to be Read
Write your code expressively
Eloquent Code, literate code , readable code
Really Obvious Code ROC Rocks!
![Page 16: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/16.jpg)
16
AND
The Difference Between$(function () {$("#txtFN").keyup(clear);
var FirstNameTextBox = $("#txtFirstName")
$(function () {FirstNameTextBox.keyup(clearEverythingButNames);
![Page 17: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/17.jpg)
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
![Page 18: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/18.jpg)
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
![Page 19: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/19.jpg)
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);}
![Page 20: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/20.jpg)
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
![Page 21: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/21.jpg)
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); }
![Page 22: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/22.jpg)
What You Could ConsiderWriting code like Amazon and Google Developers
![Page 23: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/23.jpg)
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
![Page 24: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/24.jpg)
24
Tools to Check Your Code
ESLint To look for errors and common mistakes
![Page 25: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/25.jpg)
25
And Check Your Style, Too
JSCS To enforce your coding style Comes with presets: Adopt one
![Page 26: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/26.jpg)
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
![Page 27: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/27.jpg)
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();
![Page 28: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/28.jpg)
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
![Page 29: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/29.jpg)
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);
![Page 30: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/30.jpg)
![Page 31: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/31.jpg)
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
![Page 32: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/32.jpg)
![Page 33: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/33.jpg)
33
AND
The Difference Between$(function () { FirstNameTextBox.keyup(clearEverythingButNames); LocationTextBox.keyup(clearEverythingButLocation); }
$(function () { FirstNameTextBox.keyup(ClearCriteriaNotChosen(
FirstNameTextBox)); LocationTextBox.keyup(ClearCriteriaNotChosen(
LocationTextBox));}
![Page 34: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/34.jpg)
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”
![Page 35: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/35.jpg)
Now, He’s Just Being SillyWriting code like Amazon and Google Developers
![Page 36: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/36.jpg)
36
Consider
1. A Databinding Framework + the MVVM Design Pattern
2. Automated Unit Testing (and Test Driven Development?)
3. TypeScript
![Page 37: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/37.jpg)
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
![Page 38: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/38.jpg)
38
![Page 39: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/39.jpg)
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
![Page 40: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/40.jpg)
40
![Page 41: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/41.jpg)
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
![Page 42: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/42.jpg)
42
Shameless Plug for One of My Friends
![Page 43: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/43.jpg)
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
![Page 44: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/44.jpg)
44
The Fundamental Haiku
How you write your codeWill matter more to you thenWhat your code will do
And, in the end
#ROCrox!
![Page 45: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/45.jpg)
45
![Page 46: Java script you can live with](https://reader034.fdocuments.us/reader034/viewer/2022042707/58eca6711a28abab3a8b4573/html5/thumbnails/46.jpg)
46
Thank You!
[email protected]@phvogelhttp://blog.learningtree.com/category/ux/
Don’t forget SpeakerRate Slides on
EdUIconf.org/speakerdeck/sildeshare