What if I don't need a JavaScript Framework?

Do a quick read on Twitter or visit a leading front-end development site and you are sure to find an article, tutorial or screencast series teaching you all about the wonders of Angular, Ember, React, or the next hot MV* library or framework.

What happens if you don’t need, or are unable to use, that full or robust of a solution? What are the rest of us to do? Cobble together poor implementations using these approaches because that’s what everyone else is doing? No!

This talk will explore the options you can consider if you don’t need a full-fledged MV* library, and why considering one may still be an option.

Transcript

1. WHAT IF I DON’T NEED A JAVASCRIPT FRAMEWORK? @vernonk Vernon Kesner Front-End Architect, Ally Financial Slides: http://bit.ly/syntaxcon-js
2. 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”
3. 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
4. SO WHAT IS THIS TALK ABOUT?
5. 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?”
6. BUT WHY? WE ALREADY HAVE ANGULAR, EMBER, REACT, ETC.
7. BUT WHY? SHOULDN’T WE FOCUS ON BECOMING REALLY GOOD AT ONE OF THOSE?
8. BUT WHY? SHOULDN’T WE FOCUS ON BECOMING REALLY GOOD AT ONE OF THOSE?
9. NOT THE GENERAL REALITY
10. “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
11. “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
12. “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
13. “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
14. “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
15. “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
16. “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
17. “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
18. We should be focused on what makes our teams - and ourselves - most fulfilled, productive, and open to innovation.
19. 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
20. LET’S TAKE A SECOND AND CRAFT OUR PERSONAS YEAH, I SAID IT.
21. WHO ARE WE? Ben works in an organization that just isn’t able to use a full-blown tool like Angular or Ember.
22. Penny manages content focused sites, has a primary focus on performance, and wants to keep things as light as possible. WHO ARE WE?
23. 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.
24. LET’S TAKE A JOURNEY
25. 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.
26. STRUCTURE WITHOUT A LIBRARY •ES2015 (ES6) Class and Module Syntax •Prototypes •Module pattern •Revealing module pattern
27. 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.
28. ES2015 (ES6) CLASSES Reference: http://bit.ly/mdn-js-classes
29. ES2015 (ES6) CLASSES & MODULES Reference: http://bit.ly/mdn-js-import, http://bit.ly/mdn-js-export
30. PROTOTYPES Reference: http://bit.ly/mdn-js-creating-objects
31. HEY, THOSE PROTOTYPES LOOK AN AWFUL LOT LIKE THOSE CLASSES
32. THAT’S SOME TASTY SUGAR YOU HAVE THERE!
33. MODULE PATTERN Reference: http://bit.ly/croll-module-pattern
34. REVEALING MODULE PATTERN Reference: http://bit.ly/revealing-module-pattern
35. LET’S SEE HOW SEVERAL WELL KNOWN LIBRARIES AND TOOLS ARE USING THESE T YPES OF PATTERNS
36. 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
37. BOOTSTRAP Reference: http://bit.ly/bootstrap-modal-docs, http://bit.ly/bootstrap-modal-src A different kind of IIFE
38. BOOTSTRAP Reference: http://bit.ly/bootstrap-modal-docs, http://bit.ly/bootstrap-modal-src Prototypes and jQuery Plugins
39. FOUNDATION ES2015 Classes Reference: http://bit.ly/zurb-modal-src, http://bit.ly/zurb-core-register-plugin, http://bit.ly/zurb-modal-docs
40. REACT-ROUTER Reference: http://bit.ly/react-router, http://bit.ly/react-router-history-module, http://bit.ly/react-router-link-module ES2015 Modules
41. THE IDEA IS TO USE REPEATABLE AND CONSISTENT PATTERNS THAT BEST FIT YOUR WORKFLOW AND ENVIRONMENT
42. 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).
43. 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