Forntend Best Practices

Just a run down on how front end developer should write reusable codes and world class codes that scales

Transcript

1. FRONT END BEST PRACTICES By Adenekan Wonderful @code_wonders
2. I am Adenekan Wonderful Minimal Enthusiast @code_wonders 2
3. Lets Begin Let’s Take This Step By Step
4. THE ROAD MAP Your Front End Development Road Map 4
5. HTML 5 HTML Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Reducing Markup Best Practices
6. 6 CSS Reducing Master modular CSS or use a CSS preprocessors like LESS, SCSS, Stylus and so on. Here is a current list of top 6 CSS pre processors Best Practices
7. 7 DOM Learn DOM — Document Object Model or how JS treats a browser rendered HTML page. Master the method of DOM traversal, DOM events and related topics. MDN is a great resource to start learning in depth DOM. Best Practices
8. “ Move out of your comfort zone, develop those necessary skills and go all out for that much needed advancement! 8
9. 9 Use Good Debugging Tools • Chrome Developer Tools • VSCode for Chrome • Firefox Developer Tools • Angular Extension (Augury) • VueJs (Vue Dev Extension). • React Js ( React Dev Extension) Debugging In Front End / Console API
10. 10 Frameworks Master any of the one CSS/JavaScript frameworks such as Twitter Bootstrap and it’s components. There are tools for bootstrap to quickly generate codes and clean up extra garbage at production level. CSS Frameworks / Js Frameworks
11. 11 Web Tools Gain knowledge of client- server architecture and network performance evaluation to see the assets loading to your page using chrome or firefox developer tools or your favorite developer tools. Fire Fox Developer Tool / Chrome Developer Tools
12. BUILD , ANALYTICS & TESTING
13. 13 Build Tools Master any of the one automation/build tools like Grunt— about how to build your package to minify/uglify your CSS and JS files, cleaning extra markups and style classes in production version of your page.. RollUp / Webpack / Gulp
14. 14 Web Analytics and Optimizations Collecting Information about Web Speed, optimization and collecting data. Page Tool / YSlow (Its Actually a Bit Outdated sha) / Optimization Tips
15. 15 Always Test • E2E Tests • Unit Tests • Specific Framework Tests (Angular / React) • Continous Integration ( Jenkins / Octopus) WebDriver IO
16. 16 Know Your Enviroment • How Rendering in the Browser Occurs • Repainting and Reflow • Supported DOM/CSS API • Browser Limitation Internal Browser Specifics
17. 17 Know your JavaScript • Understand the roles of Transpilers • How familiar are you with ES6 • Always ensure to have knowledge on how your code is transpiled • Available Transpilers List Of Transpiliers / Understanding ES5 / TS
18. LINTERS & PACKAGE MANAGER
19. 19 JavaScript Linters A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. ESLint is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. List Of Linters
20. PACKAGE MANAGERS 20 LIST OF PACKAGE MANAGERS
21. 21 Development Tools List Of Development Tools
22. 22 Keep up to date with resources/updates • Frontend Masters • Udemy • Coursera • Udacity • PluralSight • Web Fundamentals
23. 23 Join a Community Local / International • GDG Lagos • ALC • Devcenter • Reddit
24. MAPS G D G 24 EngineOne
25. END(); 25
26. @code_wonders ABEG FOLLOW ME ON TWITTER AND INSTAGRAM 26