Staying DRY with YUI
Upcoming SlideShare
Loading in...5
×
 

Staying DRY with YUI

on

  • 914 views

Presented at YUI Conf 2013 ...

Presented at YUI Conf 2013
Conference web site: http://yuilibrary.com/yuiconf/2013/schedule/#jonathan-tsai-and-william-seo

This tech talk is about how a team of merely two engineers built all of Talentral, a complex, rich, feels-like-desktop webapp. Everyone knows about DRY, but how is it done in practice with YUI? This is our story about how using YUI + YUI Gallery enables us to focus on high-leverage tasks at a fast-paced startup when the temptations to write quick-and-dirty solutions surface at every corner.

We'll walk through several examples of how we evaluated existing YUI modules (not just UI widgets, but also behaviors and patterns) and then decided to roll our own custom YUI modules (we've written 10, to date) in good OO-JS fashion to stay faithful to the YUI ecosystem (elegant, DRY, maintainable, community friendly) instead of succumbing to the FrankenJS approach that is so prevalent in today's JS landscape.

Statistics

Views

Total Views
914
Views on SlideShare
877
Embed Views
37

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 37

http://talentral.com 29
https://twitter.com 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Meet the Talentral Engineering team… All two of us. We took a huge risk in coming to the conference today, because if both of us died in a car accident together, our company would essentially fail.
  • Talentral is a career management platform which allows you to create a digital online portfolio of your work accomplishments
  • Create, manage, and share multiple profiles
  • Inline feels-like-desktop WYSIWYG editor. No page reloads.
  • It’s good to start with the end… The main takeaways from our talk
  • We hereby decree…
  • The two essential components to a successful startup
  • Yours truly
  • As you have already seen…
  • Double hackers all the way!
  • Everything is stacked against us
  • A wrong or bad decision could mean the end… So we can’t afford to make mistakes
  • Make decisions carefully
  • A good formula for success
  • … is one of the most critical decisions at the beginning of a startup. Once you’ve chosen a technology stack to start with, you’re pretty much married to it.
  • The next part of your success depends on…
  • It’s good to always find out what the best practices are
  • We postulate/declare that YUI is a bestpratice
  • Good community support. Is that even a question? YUI community is AWESOME! This is the thing that comes to mind when I think about the best open-source projects on the planet.Choosing YUI for your frontend is a no-brainer; it’s like having a team of 20 elite frontend engineers on YOUR team. We’ve asked countless questions on #yui IRC channel and have gotten amazing help. Thank you, you know who you are.Modern? You bet. Yahoo! uses it. Develops it, maintains it… (Industrial Strength--Image/screenshot)Extensibility...
  • DRY, also known as “Don’t Repeat Yourself,” is a software engineering principle that encourages writing clean, robust code.
  • DRY, also known as “Don’t Repeat Yourself,” is a software engineering principle that encourages writing clean, robust code.
  • DRY, also known as “Don’t Repeat Yourself,” is a software engineering principle that encourages writing clean, robust code.
  • Oooooooooh. JavaScript. Just kidding. Object-oriented JavaScript
  • Oooooooooh. JavaScript. Just kidding. Object-oriented JavaScript
  • Oooooooooh. JavaScript. Just kidding. Object-oriented JavaScript
  • Is it still our champion?
  • For us, whenever we found ourselves importing a common set of YUI modules across several JS files (node, event, io)
  • Can’t hurt a guy for trying…
  • Affected by JS load order
  • Allowed us to expose functions to other JS files. But order-dependent.Functional programming, not object-oriented; still leads to a lot of repeated codeWasn’t taking advantage of YUI loader (which allows dynamic loading of JS source files and downloading scripts in parallel)
  • We need to be able to do it multiple times with the most freshest content.We also have to consider what if it fails to load.
  • Render anywhereClient-side cache w/ timeoutFailed API call handler + automatic retry w/ exponential backoff
  • Node.getHTML()
  • Node.get(‘text’)
  • Don’t stack API calls from repeated UI triggers.Wait for the first API call to complete
  • If a lock is successfully acquired, perform a Y.io() callAlso gives user visual feedback (btn.addClass(‘ui-locked’))IO complete/failure handler can then release lock as appropriate
  • By using a function factory design pattern, we provide convenience wrappers for unlocking UI widgets without having to change the original callback functions.
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • Doing some final cleanup of our modules (3 categories of modules: Everyone, Some People, Just Us)
  • Stash content that you don’t want to be rendered in a content type not-recognized by the browser. You can still retrieve the node by ID and then getHTML()
  • Stash content that you don’t want to be rendered in a content type not-recognized by the browser. You can still
  • Use the following together. Very tasty.
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • North, South, East, West Curtains/veils. With automatically calculated offsets from X/Y coords
  • It’s good to start with the end… The main takeaways from our talk
  • We hereby decree…
  • We love you!
  • We love you!

Staying DRY with YUI Staying DRY with YUI Presentation Transcript

  • Staying DRY with YUI By Jonathan Tsai & William Seo
  • Jonathan Tsai William Seo
  • Part 4. Conclusion
  • Best Practices
  • Use, Create, Proliferate
  • Best Practices
  • Use YUI and Pure
  • Use YUI and Pure + Custom YUI Modules
  • Part 0. Background
  • Talentral = Startup
  • Hacker + Hustler - Micah Baldwin, Startup Mentor
  • Hacker + Hustler (CTO) (CEO)
  • Hacker
  • Talentral = Lean Startup
  • Hackers!
  • Lean Startup = Underdogs
  • Mistakes are costly
  • Choose wisely
  • Plan Your Work Work Your Plan
  • Plan Your Work Choose a Solid Tech Stack
  • • • • • • • Open Source Good community support Modern Comfort Compatibility Talent
  • Amazon Web Services MySQL + Redis Django + Python YUI
  • Work Your Plan Apply it correctly
  • Best Practices
  • Use, Create, Proliferate
  • Part 1. Using Best Practices
  • Amazon Web Services MySQL + Redis Django + Python YUI
  • YUI = Best Practice?
  • • • • • • • Open Source Good community support Modern Comfort Compatibility Talent
  • Best Practice #1 Use YUI
  • Best Practice #2 Stay DRY
  • DRY: DON’T REPEAT YOURSELF http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
  • NOT a Best Practice Getting WET
  • WET: WRITE EVERYTHING TWICE
  • WET: WE ENJOY TYPING
  • Best Practice #3 OO-JS
  • OOP Abstraction + Encapsulation
  • Part 2. Creating Best Practices
  • Best Practices 1. Use YUI 2. Stay DRY 3. OO-JS
  • Best Practices + Time
  • Case Study Backbone.js + Hulu
  • UH. OH. YUI = Best Practice?
  • Caveat Objects don’t define themselves
  • Use, Create, Proliferate
  • Best Practices #1-3 Custom YUI Modules
  • Where do we begin…
  • Y.Node var nodeB = f(nodeA);
  • Identify a pattern
  • At first we tried…
  • Repeated code everywhere
  • var _Y; // global Y YUI().use(..., function(Y) { _Y = Y; });
  • Y.namespace()
  • Best Practices #1-3 Custom YUI Modules
  • Example: Background Fetcher
  • What we wanted:
  • What we wanted: HTTP.GET + Render Content
  • var cfg = {on:{complete:..., failure: ...}}; var request = Y.io(uri,cfg); IO_TRANSACTION_DATA[request. id] = transactionData; ...
  • Y.BackgroundFetcher. backgroundFetch(uri, type, parent, callbacks);
  • Example: Unescape
  • What we wanted:
  • What we wanted: Edit HTML Content as Text
  • Node.getHTML()
  • 71
  • 72
  • Node.get('text')
  • 74
  • 75
  • var unescaped = Y.Unescape.htmlUnescape (node.getHTML());
  • Example: UI Lock
  • What we wanted:
  • What we wanted: Don’t stack API calls
  • function handleBtnClicked(e) { var btn = this; var lock = Y.UILock.lock(btn); if (lock) {...} lock.release(); }
  • Y.io(uri, { on: { complete: Y.UILock.ioUnlock(lock, callback) } });
  • Example: Spotlight
  • What we wanted:
  • What we wanted: Node-level modal effect
  • 85
  • Part 3. Proliferating Best Practices
  • Coming Soon https://github.com/talentral
  • Fav Tips & Tricks #1 <script id="..." type="text/xtemplate">BLOB</script>
  • Fav Tips & Tricks #2 Y.Template(); Y.Lang.sub();
  • Fav Tips & Tricks #3 <div tlnt:item-type="skill" tlnt:item-id="6547"> </div>
  • Fav Tips & Tricks #3 node.getAttribute('tlnt :item-id’);
  • How did we ever survive without…
  • 94
  • 95
  • 96
  • Part 4. Conclusion
  • Best Practices
  • Use YUI and Pure + Custom YUI Modules
  • Use, Create, Proliferate
  • Special Thanks To YUI Team & Contributors #yui IRC folks
  • On the Interwebs @jontsai http://talentral.com
  • Q&A