Understand Front-End Roles

Presented at the Front-End Orlando Meetup

Transcript

1. Bruno Genaro (@bfgenaro) Front-End ____________ at Cisco OrlandoJS Meetup Co-Organizer WHY IS THE BEST TIME TO BE A FRONT-END …? UNDERSTAND FRONT-END ROLES
2. IN THE RIGHT PLACE AT THE RIGHT TIME • Front-End Designer / UI Developer • Front-End Developer • Front-End Engineer / JavaScript Engineer • Full Stack Developer/Engineer
3. WHAT DO YOU DO FOR A LIVING?
4. Webmasters 
 Web Designers WE USED TO BE:
5. OUR JOB WAS
8. BEING A JAVASCRIPT DEVELOPER WASN’T A THING TO BE PROUD OF
10. DO YOU REMEMBER THIS WEBSITE?
11. "REAL CODING" WAS DONE IN THE BACK-END
12. AND NOW…
13. OK, BUT WHAT IS FRONT-END? between design and back-end http://bradfrost.com/blog/post/frontend-design/
14. WE ARE THE NEW SUPERHERO Today we’re building highly reusable, responsive elements that dynamically pull in data via endpoints from server-side applications to create a seamless experience on the client. (http://drewbarontini.com/articles/the-front-end-spectrum/)
15. Front-End involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface. (http://bradfrost.com/blog/post/frontend-design/)
16. BEING A GOOD FRONT-END DEVELOPER IS HARD HTML5, HAML, CSS3, Sass, LESS, Stylus, SMACSS, BEM, OOCSS, JavaScript, jQuery, Angular 1.x, Angular 2, Ember, Backbone, React, ES2015/6, JSX, Babel, Flux, Redux, Immutable, Lodash, Webpack, Grunt, Gulp, Bower, npm, Git, Responsive and much MUCH more...
17. HAVE YOU HEARD ABOUT JAVASCRIPT FATIGUE? Is the result of the JavaScript ecosystem continued growth So, is JavaScript the only “hard" part of being a Front-End Developer?
18. NOPE!
19. CSS IS PAINFUL TO WORK WITH ONCE YOUR SITE STARTS TO GROW :( Same-Origin Policy What is JSONP?
20. “Front-End development is the most hostile development environment in the world.” (Peter-Paul Koch, Douglas Crockford, and Nicholas Zakas)
21. JOB POSTINGS DRIVE YOU CRAZY!
22. MORE JOB POSTINGS…
23. COMPANIES ARE LOOKING FOR DIFFERENT TYPE OF FRONT-END DEVELOPERS AND THEY DON'T EVEN KNOW IT
24. WE HAVE A PROBLEM…
25. IF THEY’RE DEVELOPERS, THEN THEY’RE PART OF THE ENGINEERING TEAM. IF FRONT-END DEVELOPMENT IS DEVELOPMENT, WHY DID WE HAVE OUR DESIGNERS DO IT? (SNOOK - SHOPIFY: HTTPS://SNOOK.CA/ARCHIVES/OPINION/DESIGN-ENGINEERING%0A)
26. FRONT-END DESIGNER / UI DEVELOPER • Used to be the Web Designer • Convert layout to functional HTML, CSS and JS • CSS Animation • Accessibility • Performance
27. FRONT-END DESIGNER / UI DEVELOPER • Understand UX principles • Low level JavaScript (jQuery) • Might be a template maker for a CMS
28. FRONT-END DEVELOPER • Can perform the duties of a Front-end Designer • Semantic HTML • CSS architecture (SMACSS, BEM, OOCSS) • Pre-processors: Haml, Jade, Sass, LESS, Stylus • Play with the latest JS Framework • Debug (DevTools, Firebug)
29. FRONT-END DEVELOPER • Basic terminal understand • Basic understand of build processors (Grunt, Gulp) • Basic understand of bundlers (Webpack, Browserify) • Basic understand of testing (Mocha, Karma)
30. FRONT-END ENGINEER / JAVASCRIPT DEVELOPER • Can perform the duties of a Front-end Developer • JavaScript Ninja • Prototypal Inheritance • Functional Programming • Architectures (MVC, Flux) • ES2015 (ES6) • JavaScript concepts: Scope, Hoisting, Closures, Callback etc
31. FRONT-END ENGINEER / JAVASCRIPT DEVELOPER • Deal with the latest JavaScript frameworks/libraries (is React still good?) • Design Patterns / Best Practices • Web services - REST, Web Sockets and much more…
33. "Jack of all trades, master of none" A developer who can introduce a bug to every layer of the software stack.
34. “STACKS” ARE GROWING… http://andyshora.com/full-stack-developers.html
35. FULL STACK DEVELOPER / ENGINEER • Also known as Software Developer / Engineer • JavaScript used to be ONLY a Front-End technology • NodeJS • npm • Universal JavaScript
36. FULL STACK DEVELOPER / ENGINEER
37. EVOLUTION… Front-End Designer Front-End Developer Front-End Engineer Full Stack Developer You don't need to be the perfect fit for all the front-end job postings out there! You can specialize in ONLY one!
38. WHY NOW IS THE BEST TIME EVER TO BE A FRONT-END DEVELOPER?
39. OUR OLD AND UGLY FRIEND: JAVASCRIPT!
40. KNOWING JAVASCRIPT, YOU CAN WRITE • Front-End • Back-End • Both together (Universal / Isomorphic) • AND…
42. WITH JAVASCRIPT, YOU CAN CREATE: • (Native) Mobile Apps (Native Script, React Native, Appcelerator Titanium) • Rich Hybrid Mobile Apps (Ionic) • Bot Frameworks • Internet of Things (even fly drones, right Sergio?) • 3D Games • Virtual Reality
43. WHY IS IT SO HARD TO FIND A GOOD FRONT END DEVELOPER? Front-End development is a lot harder than it looks A good front end developer has to be patient, committed, and willing to fulfill a lot of different roles outside of traditional development
44. PICK THE BEST TITLE FOR YOU, BUT A Front-End Developer is Aware (Chris Coyer: https://css-tricks.com/front-end-developer-aware/)
45. AWARE OF: • Design • Back-End • Network • Performance • Content Strategy • Databases • Testing • Systems • DevOps • Servers • Accessibility • Responsiveness
46. FUN FACTS ABOUT ME: Hired at Concepta as Front-End Developer > 2 Years as Mobile App Developer (using JS) Hired at Cisco as Senior Web Engineer - UI/UX > Front-End Engineer
47. DON’T BE AFRAID OF TITLES!
48. THE MAGIC HAPPENS WHEN YOU STEP OUTSIDE YOUR COMFORT ZONE (@ZENOROCHA)
49. YOU ARE THE NEW SUPERHERO!
50. THANK YOU! Links: • http://thefullstack.xyz/javascript-developers/ • http://drewbarontini.com/articles/the-front-end-spectrum/ • http://bradfrost.com/blog/post/frontend-design/ • https://snook.ca/archives/opinion/design-engineering%0a • https://medium.com/creative-business/why-is-it-so-hard-to-find-a-front-end- developer-cb92848a7c6f#.1nnj4euxj • https://css-tricks.com/front-end-developer-aware/