Dealing with javascript

Despite javascript had many tools, frameworks, and libraries, It is very useful to have knowledge of approaches and techniques. So, this presentation will explain some of the most common to me during my life as a javascript developer, I hope you enjoy it.

Transcript

1. DEALING WITH JAVASCRIPT Useful approaches and tools Luan Fagundes @luan03
2. Agenda • Fun facts • Terminology • Paradigms • Design Patterns • Performance • Best practices • Tooling • References @luan03
3. Fun facts @luan03 • JavaScript was built in 10 days only by Brendan Eich • Loved by Hackers e.g. Flood, Crawlers, DDOS, XSS, man-in-the-middle, etc. • Automatic Semicolon Insertion • https://github.com/denysdovhan/wtfjs • Vanilla
4. Terminology @luan03 It is a discipline that studies, among other things, the development of such terms and their interrelationships within a specialized domain. https://www.analyticsvidhya.com/glossary-of-common-statistics-and- machine-learning-terms/
5. Terminology @luan03 Vanilla Vanilla JavaScript is referred to the standard JavaScript – no framework.
6. Terminology @luan03 Vanilla
7. @luan03 *ES6 modules are always in strict mode. Pragma defines how a compiler, interpreter or assembler should process the program. It helps in writing a more secure and optimised JavaScript code. Terminology Pragma
8. @luan03 An anonymous function is a function that was declared without any named identifier to refer to it. Terminology Anonymous function
9. @luan03 Function and variable declarations are added to memory during the compile phase. JavaScript only hoists declarations not Initializations. Declare variables at the top of their respective scopes helps to avoid undesirable effects. Terminology Hoisting
10. @luan03 A closure is a function having access to the parent scope, even after the parent function has closed. *Lexical Scoping (Every inner level can access its outer levels.) Terminology Closure
11. @luan03 JavaScript loses scope of this when used inside of a function that is contained inside of another function. We can’t alter how lexical scoping in JavaScript works, but we can control the context in which we call our functions. Terminology Closure
12. @luan03 Terminology Closure 1. Storing a reference to this in another variable.
13. @luan03 Terminology Closure 2. Call and apply - are useful for when you want to borrow a method from one object and use it in a completely separate object.
14. @luan03 Terminology Closure 3. Bind - is useful for maintaining context in asynchronous callbacks and events.
15. @luan03 It is the approach of using multiple functions with single arguments, in place of a single function with multiple arguments. We can do this with as many arguments as we want o/ Terminology Currying
16. Paradigms @luan03 Programming paradigms are a way to classify programming languages based on their features. JavaScript is a multi-paradigm language, supporting imperative/procedural programming along with OOP and functional programming. *JavaScript supports OOP with prototypal inheritance.
17. Paradigm @luan03 Imperative programming is a programming paradigm that uses statements that change a program's state. Imperative
18. Paradigm @luan03 A style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. Functional
19. Paradigm @luan03 It is a style of object-oriented programming in which behaviour reuse (known as inheritance) is performed via a process of reusing existing objects via delegation that serve as prototypes. OOP Prototypal
20. Paradigm @luan03 Based upon objects (having both data and methods) that aims to incorporate the advantages of modularity and reusability. eg. ES6 class OOP
21. Design patterns @luan03 A design pattern is a well-described solution to a common software problem. 1. Creational Patterns 2. Structural Patterns 3. Behavioral Patterns
22. Design patterns @luan03 Modules are an integral piece of any robust application's architecture and typically help in keeping the units of code for a project both cleanly separated and organized. @CommonJS and @AMD 1. Cleaner Approach 2. Support for private data 3. Reduces global noise 4. Localization of functions and variables through closures 5. Concise syntax 6. Explicitly defined public methods and variables Module Structural Design Pattern
23. Design patterns @luan03 Another pattern we reviewed earlier is the Observer (Publish/Subscribe) pattern. This is where the objects in a system may subscribe to other objects and be notified by them when an event of interest occurs. @event listeners @data binding (React, Vue, Angular) @RxJS Observer Behavioral Design Pattern
24. Design patterns @luan03 Singleton pattern can be implemented by creating a class with a method that creates a new instance of the class if one doesn't exist. In the event of an instance already existing, it simply returns a reference to that object. Singleton Creational Design Pattern
25. Design patterns @luan03 This pattern provides a convenient higher-level interface to a larger body of code, hiding its true underlying complexity. Think of it as simplifying the API being presented to other developers, something which almost always improves usability. Facade Structural Design Pattern
26. Design patterns @luan03 Mixin is a class that contains methods for use by other classes without having to be the parent class of those other classes. Also, encourage code reuse and can be used to avoid the inheritance ambiguity. Mixin Creational Design Pattern
27. Performance @luan03 JavaScript performance, from environments, response times, context, parsing, compiling, executing and bundle sizes. RAIL Response - Animation - Idle - Load
28. Performance @luan03 RAIL is a user-centric performance model that breaks down the user's experience into key actions. RAIL is a model for breaking down a user’s experience into key actions (for example, tap, drag, scroll, load). RAIL provides performance goals for these actions (for example, tap to paint in under 100 milliseconds). RAIL provides a structure for thinking about performance, so that designers and developers can reliably target the highest-impact work.
29. Performance @luan03 The best way of optimise javascript is not to use javascript, WTF!? - cut strings e.g. Hello my name is Luan and I’m… CSS - validation HTML5 - tooltips CSS - components (carousel, accordion, tabs) HTML + CSS
30. Performance @luan03 Sure, but we have to think about semantics, isn't it? Everything in Life is a Trade-off.
31. Performance @luan03 Tips: 1. Firstly, develop your code, measure, finally, optimise it. 2. Be in favor of legibility and maintainability. 3. Javascript engines are very optimised. 4. Heavy usage of defer and async. @jsperf @devtools
32. Best practices @luan03 Coding best practices are a set of informal rules that the software development community has learned over time which can help improve the quality of software.
33. Best practices @luan03 Comments 1. Not all programmers can/will write really obvious code 2. Comments guide you, provide context, and convey an overall meaning. 3. Some companies require their employees to comment their code such as Google. 4. Comments are not just for code. They can document important program information such as author, date, license, and copyright details. https://google.github.io/styleguide/jsguide.html#jsdoc-tags
34. Best practices @luan03 Code convention and style guide https://github.com/airbnb/javascript https://google.github.io/styleguide/jsguide.html
35. Best practices @luan03 Code convention and style guide Eslint will help us to create, maintain, and extend to others style guides such as google and airbnb. https://github.com/kucherenko/jscpd
36. Best practices @luan03 Tests Testing helps in identifying the bugs at an early stage. Thus, it saves a reasonable amount of money on software development cost.
37. Best practices @luan03 Unit tests Testing of individual functions or classes by supplying input and making sure the output is as expected. • Mocha/Chai • QUnit • Jasmine/Karma
38. Best practices @luan03 Integration tests Testing processes or components to behave as expected, including the side effects.
39. Best practices @luan03 (A.K.A Functional Tests) Testing scenarios on the product itself, by controlling the browser or the website, regardless of the internal structure to ensure expected behavior. UI tests
40. Best practices @luan03 Code coverage It describes how much program source code is covered by a testing plan. Developers look at the number of program subroutines and lines of code that are covered by a set of testing resources and techniques. https://istanbul.js.org/
41. Best practices @luan03 Transpilers A JavaScript Transpiler is a tool that takes code written in another language transforms and compiles it into JavaScript.
42. Best practices @luan03 Coffeescript The golden rule of CoffeeScript is: “It’s just JavaScript.” The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.
43. Best practices @luan03 Babel Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
44. Best practices @luan03 Typescript TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and it adds optional static typing to the language.
45. Best practices @luan03 Tooling 1. Gulp/Grunt 2. Webpack 3. Browserify 4. Rollup @chrome devtools
46. References @luan03 1. https://caniuse.com/ 2. http://kangax.github.io/compat-table/esnext/ 3. https://github.com/getify/You-Dont-Know-JS https://javascriptweekly.com/ https://github.com/denysdovhan/wtfjs https://addyosmani.com/resources/essentialjsdesignpatterns/book/ https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3 https://www.sitepoint.com/javascript-performance-optimization-tips-an-overview/ https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/ https://github.com/airbnb/javascript https://google.github.io/styleguide/jsguide.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide https://spin.atomicobject.com/2014/10/20/javascript-scope-closures/ @_ericelliott @paul_irish @addyosmani @rodcast
47. End @luan03 Javascript is a very easy language to learn. But very hard to master. - Quora user. Cheers Revised by: Karol Harumi