Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understand Front-End Roles

Understand Front-End Roles

Presented at the Front-End Orlando Meetup

Bruno Genaro

July 27, 2016
Tweet

More Decks by Bruno Genaro

Other Decks in Technology

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. 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/)
  4. Front-End involves creating the HTML, CSS, and presentational JavaScript code

    that makes up a user interface. (http://bradfrost.com/blog/post/frontend-design/)
  5. 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...
  6. 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?
  7. CSS IS PAINFUL TO WORK WITH ONCE YOUR SITE STARTS

    TO GROW :( Same-Origin Policy What is JSONP?
  8. “Front-End development is the most hostile development environment in the

    world.” (Peter-Paul Koch, Douglas Crockford, and Nicholas Zakas)
  9. 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)
  10. FRONT-END DESIGNER / UI DEVELOPER • Used to be the

    Web Designer • Convert layout to functional HTML, CSS and JS • CSS Animation • Accessibility • Performance
  11. FRONT-END DESIGNER / UI DEVELOPER • Understand UX principles •

    Low level JavaScript (jQuery) • Might be a template maker for a CMS
  12. 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)
  13. 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)
  14. 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
  15. 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…
  16. "Jack of all trades, master of none" A developer who

    can introduce a bug to every layer of the software stack.
  17. FULL STACK DEVELOPER / ENGINEER • Also known as Software

    Developer / Engineer • JavaScript used to be ONLY a Front-End technology • NodeJS • npm • Universal JavaScript
  18. 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!
  19. KNOWING JAVASCRIPT, YOU CAN WRITE • Front-End • Back-End •

    Both together (Universal / Isomorphic) • AND…
  20. 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
  21. 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
  22. PICK THE BEST TITLE FOR YOU, BUT A Front-End Developer

    is Aware (Chris Coyer: https://css-tricks.com/front-end-developer-aware/)
  23. AWARE OF: • Design • Back-End • Network • Performance

    • Content Strategy • Databases • Testing • Systems • DevOps • Servers • Accessibility • Responsiveness
  24. 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
  25. 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/