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.
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.
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