Modern UX Dev Tools

Transcript

1. Modern UX Dev tooling Ryan Joy - @atxryan
2. Who am I? Web developer / UX developer Developer Evangelist @ Microsoft Local meetup organizer. Come talk to me about Refresh Austin, Austin Windows App Developers, Austin Geek Lunch, Austin Web Design & Developer Meetup. Loves JavaScript Find me on Twitter at @atxryan or ryanjoy.com
3. About this talk. • Rebecca Murphey gave an awesome talk at TXJS last year. This talk is inspired by her listing of the baseline skills she considers a part of modern JavaScript development. • PSA – TXJS tickets go on sale again today at 11am CT. • This talk is geared toward front-end developers looking to take their skills past simple jQuery plugins. You may be managing large projects, writing single page applications, or just want to level up.
4. Version Control (VCS) Commit yourself.
5. Git and Github You don’t have to use Git and GitHub for your personal projects, but you’d be remiss to not understand these things. Most open-source projects of interest make their home on Github. Cloning a repo to try it out should be second-nature to you.
6. Git • Make sure you know how to create a new repo, clone, branch, and merge locally. • Next, look at collaboration workflow, pull requests, code reviews • Do you use SVN or something else at work? Try using git-svn on your own machines. • Create a Git repository for your code snippets, project folder, playground, etc.
7. JavaScript jQuery is made of JavaScript. True story.
8. JavaScript You want to know: • prototypal inheritance, • closures & function scope, • MV* patterns You should understand • data structures like objects and arrays; functions • call and apply • You should understand patterns.
9. Improve yourself: JavaScript
10. Modularity You don’t write everything in the global namespace, right?
11. Modularity • We don’t manage dependencies by adding one more script or style tag. • RequireJS lets you develop with small, modular JS and CSS files • It concatenates and minifies them via its optimization tool for production use. • Not convinced of modules? At least use tools like UglifyJS, Closure Compiler, or even YUI compressor that will minify your code, and then concatenate those minified files for production.
12. CSS Preprocessing SASS, Stylus, Compass, and/or LESS These tools give you features like variables, math, logic, mixins and they can also help smooth over the CSS property prefix mess.
13. Browser tools Hint: if you’re still using alert to debug, you’re doing it wrong.
14. Debugging Make sure you’re using and understand `console.log`, `console.dir`, the Network tab, Firebug, Internet Explorer dev tools, or Chrome dev tools. Learn how to set breakpoints & step debugging. Look at performance profilers and the DOM Inspector. Check out timelines.
15. Browser developer tools Get very familiar with at least one browser’s dev tools.
16. Browser tools
17. Templating Keep your controls out of my views.
18. Templating Servers used to respond to XHRs with a snippet of HTML. Now we send JSON or other data. Or, we should. Client-side templating libraries let you maintain templates that, when mixed with some data model, turn into a string of HTML.
19. You should also be doing this on the server.
20. Process Automation A good developer is a lazy developer.
21. Improve: Process automation Software developers have been using build tools and other process automation for a long time. Things like ant and make. You may have used rake on a Rails project. Take those skills into your front-end workflow!
22. Dependency management • npm – Node Package Manager • brew – Homebrew on OS X • gem – Ruby gems on OS X • pip – Python Package Index • NuGet – Package manager within Visual Studio • Bower – Browser-based package manager from Twitter
23. Testing • Force yourself to write tests – perhaps before you even write the code • It will help you organize your thinking and your code. • QUnit • Jasmine • Mocha • Selenium • JSHint <- integrates into your editor! • Testing is easy when your code is modular and loosely coupled. • Code that’s not well organized can be difficult or impossible to test.
24. Frameworks Someone has already done this. Follow them.
25. Frameworks • All this talk of plain vanilla JavaScript and using a module system doesn’t mean you shouldn’t use Frameworks. • They follow most of the tools and patterns we’ve talked about. At the very least, they’re a great learning tool! Whole package • BootStrap • Foundation HTML5 • HTML5 Boilerplate CSS • OOCSS • SMACSS JavaScript • Backbone • Ember.js • Angular • Knockout • …
26. CLI Do not be afraid of the command line.
27. Command line A lot of the tools I mention use command line. Get used to it. ssh to log in to another machine or server ack or grep to find files in a project that contain a string or pattern git to do add, commit, status, and pull brew to use Homebrew to install packages npm to install Node packages gem to install Ruby packages If there are commands you use frequently, create an alias. Edit your .bashrc or .profile or .zshrc or .thingy
28. What didn’t we talk about? So much.
29. Stay thirsty, my friend. • Rapid prototyping • Wireframing • Server-side frameworks and templating • Node.js • Compile to JavaScript languages like CoffeeScript or TypeScript • Importance of your IDE / text editor • Backups besides VCS • Other DVCS like Mercurial • Environment tools like virtualenv, nave, or Vagrant
30. Thank you! Ryan Joy - @atxryan