WHAT IF I DON’T NEED A JAVASCRIPT FRAMEWORK? @vernonk Vernon Kesner Front-End Architect, Ally Financial Slides: http://bit.ly/syntaxcon-js 

HI THERE, I’M VERNON. • Some people call me "Vern", that's cool. • Worked full-time on the web since 2002. Wow, so much has happened. • Front-End Architect at Ally Financial • Husband, father of 3 awesome "kids” 

QUICK DISCLAIMER This will not be a session about "why you don't need jQuery" or a talk that bashes one library or tool over another. I have my preferences, just like you do. This is one of the beautiful and wonderful things about our industry. We can approach the same problem from many directions, and still solve it elegantly. What this talk is not 

SO WHAT IS THIS TALK ABOUT? 

IN A NUTSHELL… “What are some things I can do – outside of using a library – that can help make sure my code is maintainable and reusable?” 

BUT WHY? WE ALREADY HAVE ANGULAR, EMBER, REACT, ETC. 

BUT WHY? SHOULDN’T WE FOCUS ON BECOMING REALLY GOOD AT ONE OF THOSE? 

BUT WHY? SHOULDN’T WE FOCUS ON BECOMING REALLY GOOD AT ONE OF THOSE? 

NOT THE GENERAL REALITY 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

“These people have a busy job, and they want to make it work. Often they have to cut corners. In many other cases they rely on massive libraries and frameworks that promise magical solutions. This leads to products that are in a working state, and not in an enjoyable state.” https://www.christianheilmann.com/2015/01/29/on-towards-my-next-challenge-2/ - Christian Heilmann 

We should be focused on what makes our teams - and ourselves - most fulfilled, productive, and open to innovation. 

SO WHAT DOES THAT MEAN? For Front-End Engineering teams, it highlights 3 major areas: 1. Long-Life Code 2. Scalable and Understandable Workflows, Processes, and Tools 3. Clear Architecture and Direction 

LET’S TAKE A SECOND AND CRAFT OUR PERSONAS YEAH, I SAID IT. 

WHO ARE WE? Ben works in an organization that just isn’t able to use a full-blown tool like Angular or Ember. 

Penny manages content focused sites, has a primary focus on performance, and wants to keep things as light as possible. WHO ARE WE? 

WHO ARE WE? Tim just doesn’t get behind the “pick a library” approach. He knows that libraries come and go, he’s worried about building something that lasts. 

LET’S TAKE A JOURNEY 

WHAT WE’LL ACCOMPLISH TODAY • Take a look at how we can gain structure in our code, without the requirement of a library. • Look at examples of reusable patterns, that can potentially give you some ideas to potentially leverage and build on. • We’ll look at source code examples from popular Open Source libraries, to see how they create reusable products. • Look at a few action items you can go away with. 

STRUCTURE WITHOUT A LIBRARY •ES2015 (ES6) Class and Module Syntax •Prototypes •Module pattern •Revealing module pattern 

LET’S LOOK AT EX AMPLES OF THESE PATTERNS, AND THEN SEE HOW THEY MAY BE USED IN A FEW POPUL AR LIBRARIES. THESE EXAMPLES WILL GIVE YOU A FEEL FOR PATTERNS YOU WOULD LIKE TO EXPLORE FURTHER. 

ES2015 (ES6) CLASSES Reference: http://bit.ly/mdn-js-classes 

ES2015 (ES6) CLASSES & MODULES Reference: http://bit.ly/mdn-js-import, http://bit.ly/mdn-js-export 

PROTOTYPES Reference: http://bit.ly/mdn-js-creating-objects 

HEY, THOSE PROTOTYPES LOOK AN AWFUL LOT LIKE THOSE CLASSES 

THAT’S SOME TASTY SUGAR YOU HAVE THERE! 

MODULE PATTERN Reference: http://bit.ly/croll-module-pattern 

REVEALING MODULE PATTERN Reference: http://bit.ly/revealing-module-pattern 

LET’S SEE HOW SEVERAL WELL KNOWN LIBRARIES AND TOOLS ARE USING THESE T YPES OF PATTERNS 

jQUERY Reference: http://bit.ly/jquery-boilerplate, http://bit.ly/tooltipster jQuery Plugins are actually methods on jQuery’s prototype. $.fn[ pluginName ] is the convention used to create a common plugin that is available as a jQuery object method. e.g. $( “.mything” ).myFancyPlugin(); $.fn is an alias to jQuery.prototype Plugin Interface 

BOOTSTRAP Reference: http://bit.ly/bootstrap-modal-docs, http://bit.ly/bootstrap-modal-src A different kind of IIFE 

BOOTSTRAP Reference: http://bit.ly/bootstrap-modal-docs, http://bit.ly/bootstrap-modal-src Prototypes and jQuery Plugins 

FOUNDATION ES2015 Classes Reference: http://bit.ly/zurb-modal-src, http://bit.ly/zurb-core-register-plugin, http://bit.ly/zurb-modal-docs 

REACT-ROUTER Reference: http://bit.ly/react-router, http://bit.ly/react-router-history-module, http://bit.ly/react-router-link-module ES2015 Modules 

THE IDEA IS TO USE REPEATABLE AND CONSISTENT PATTERNS THAT BEST FIT YOUR WORKFLOW AND ENVIRONMENT 

WHAT CAN I DO TODAY? Let’s take a look at a 5 things you can do, starting today: 1. Decide a clear point where the shift will happen. It is possible to move to more maintainable patterns and support legacy code. 2. For each new project you look at, dedicate a particular focus to looking at particular areas of reusability. 3. If you aren’t, look at tooling and workflow. Using ES2015 at this point, mostly makes it a requirement. Look into Babel, Webpack or Browserify (Webpack if you can handle the curve), Gulp, Grunt. 4. Whiteboard or list what you need vs. what is nice to have. 5. Choose something and stick to it (unless it’s obviously bad). 

THANK YOU! QUESTIONS? I ’ M H A P P Y TO TA L K M O R E A B O U T T H I S S T U F F W I T H A N YO N E A F T E RWA R D S O R W H I L E W E ’ R E H E R E , J U S T G R A B M E . @vernonk