# Technology Understanding - Web Frontend Engineer :::info Author: Suetyi If you are on this desk, please add yourself as an "Author" and improve this document. ::: ## Overview Front-end, also known as client-side programming, is what happens in the browsers. Everything a visitor in your site sees, clicks, or uses to input or retrieve information is the work of the front-end developer who creates client-side software that brings the site’s design to life. Front-end developers are the bridge between the designer and the back-end programmer. Their focus is on user experience, and the technology they implement will hinge on how well it accomplishes that speed, efficiency, and smooth functionality. ![](https://i.imgur.com/I3DJAsi.png) > These job titles have similar meaning to Frontend Developer: *Software Developer, React/Vue Developer, Web Developer,Frontend Engineer, Javascript Engineer, UI Developer* ## Basic of Front-End Technology ![](https://i.imgur.com/c1pcplU.png) ### Front-End Language * **HTML5**: It's content of the web. E.g text, pictures, video, links * **CSS3**: Latest standard for CSS which dictates the styling & effect to website to make it look good * CSS pre-processor is as widely used as CSS (+) Ability to supercharge productivity, help developers write more succinct CSS, and to keep files organized. E.g Sass or LESS * CSS Grid * **AJAX**: It's used to create dynamic applications and webpages. It allows a page to update data within certain elements separate from the whole page, so portions can be refreshed without reloading the entire app. * **JSON**: It's a fundamental part of AJAX, and also a really common data transfer format you’ll come across a lot when talking about front-end strategies. * **Javascript**: The most widely used client-side scripting - nearly every site’s front end is a combination of JavaScript and HTML and CSS. * **React.js** is based around creating components, such as a button or a side menu, that can render HTML based on input parameters. React is not a framework per se, it only provides the view layer, however, its rich ecosystem of tools and libraries has everything you’ll need to create complex applications. * **Angular.js** is usually written in TypeScript. It has a higher abstraction and complexity levels, and the need to learn TypeScript as a primary development language makes the initial learning curve steeper. * **Vue.js** is a framework designed to be modular and incrementally adoptable. * **Typescript** extends JavaScript to add static type checking and the latest ECMAScript features, such as async/await, classes or arrow functions. As a result, TypeScript compiles into vanilla JavaScript. Reading materials [here](https://medium.com/devtrailsio/beginners-web-development-guide-part-1-frontend-ca59f1877ec5) ### Front-End Framework Frameworks make quick work of development with libraries of pre-packaged, shareable code and software add-ons. * **jQuery**: A fast, small, JS object library, it streamlines how JavaScript behaves across different browsers. * **Boostrap**: This leading mobile-first framework blends HTML, CSS, and JavaScript to facilitate rapid responsive app development. With Bootstrap, your site is compatible with all modern browsers and looks great on any size screen, from tablets to phones to laptops. ## Intermediary Front-End Technology ![](https://i.imgur.com/NfoDsN3.png) To be a solid Frontend engineer, the 3 top skills to master: * **React.js** - javascript framework * Newer/ Advacned React Topics: Fragments, Async Act, Cocurrent Mode, Portal, Hooks, Suspense * Framework/Tools: React Router, Create React App or Parcel, Apollo for GraphQL, Next.js (server-side rendered apps), React storybook (testing/documenting framework), CSS in React (Emotion/Style-Component) * **NPM** - Node.js on your machine * **Webpack** - to bundle up code into one file Other Front-End Component: * **JAMStack:** It's a way to build your application, the underlying commonality is they don't depend on a web server. E.g Jekyll, Gatsby & Next.js (a react framework that support JAMStack) * **Front End Build Tools:** NPM Scripts (basic build jobs), Webpack (definitive bundler for CSS & Javascript), Parcel (good for simple system) * **State Management:** Mobx (way simpler), Redux (most popular,stable, good for complex heavy-data lifting app) * **Documentation, Unit/E2E Testing:** Jest, Mocha, Karma, Enzyme, Cypress.io E2E Testing, Storybook (documentation, component) * **Performance & Optimization**: PWA (progressive web apps), AMP (Google's preferred mobile content format) * **JS Skills**: Typescript, Functional Programming (rx.js, immutable.js,ramda) - these are signs of strong javascript developer ### To standout from other front-end developer... If candidates has the following additional knowledge, it would make them comparably outstanding to the standard front-end developers: > Comment from Suetyi: appreciate any input here..` * **Backend/ Server-side**: Understanding of asynchronous request handling, partial page updates, and RESTful API calls * **Cross-browser** - Understanding cross-browser compatibility issues and way to work around them * **Testing** - Does candidate have TDD practices in frontend development? E.g Mocha & Jasmine * **Web Performanc**e - Understanding of accessibility, SEO principles and its implication for web application * **UI and UX Design** - with front-end developement, another important consideration is the design element. A front-end developers with good UI/UX skills would be a bonus. ### Candidates Outreach 17 March #### Excellent |Name|Comments| |-|-|-| |[Chih-Hao Cheng](https://www.linkedin.com/in/chcheng/)| Frontend Eng manager at Yahoo TW. Ex-Paypal. "Capable of developing optimized & cross-browser web app"| |[Phil Seaton](https://www.linkedin.com/in/philseaton/)| MIT-trained software developer. Currently Director of Engineering in California. Ex-FE Eng at Drone company. Diverse side-project experiences| #### Good |Name|Comments| |-|-|-| |[Kyle Williams](https://www.linkedin.com/in/kylewilliams17/)| Candidate has experience in both programming & UX which is rare in HK. Portflio shows thoughtfulness in user experience| |[Cheng Han Kuo](https://www.linkedin.com/in/hankkuo/)|Demonstrate past engineering lead experience. Skills: Javascript ECMA6-7, Webpack, Testing (Mocha & Jasmine). Understanding of different FE component| |[Patrick Wang](https://www.linkedin.com/in/patrickpatw/)|Has UI/UX experience, Active open source contributor. Keywords:Next.js, NPM package, Storybook of reusable component| |[Yi-Heng Lee](https://www.linkedin.com/in/yi-heng-lee-67770570/)| Slightly on the fence if he's good or average but profile does show keywords like GraphQL, Mobx Observable| #### Average |Name|Comments| |-|-|-| |[Alex Wang](https://www.linkedin.com/in/alex-wang-6b589088/)| Experienced FE engineer and some team lead experience. Unable to tell if he's good or excellent. |[Edward Chau](https://www.linkedin.com/in/edward-chau-1507a2a5/)| Average candidate, nothing outstanding on LinkedIn| |[Bess Leng](https://www.linkedin.com/in/bess-leng/)|Lead Eng experience in Health care company.| |[Kicker Chen](https://www.linkedin.com/in/kicker-chen-8abb965a/)| App Team Lead and SR FE Engineer experience| ### Candidates Outreach 17 March #### Excellent |Name|Comments| |-|-|-| | [Mandy Michael](https://www.linkedin.com/in/mandykerr/)|Director & co-organise of web conference, meetups. Strong past working experiences in FE. |[Guy Nesher](https://www.linkedin.com/in/nesherguy/)|Mozilla tech speaker, Niche javascript skills: Backbone.JS, Knockout, Knockback and Wire.js |[Gil Tayar](https://www.linkedin.com/in/giltayar/)|Past working on big project at Wix. Passion in testing software. Has built Applitools'Visual Grid, which is a grid of thousands of browsers (Chrome, FIrefox, IE, Edge, and Safari) that can render screenshots of multiple web pages concurrently and with great speed." |[Zain Fathoni](https://www.linkedin.com/in/zainfathoni/)| Senior Software Engineer at Ninjavan. Enthusiastic about Javascript, co-organised React.js community in Indonesia. #### Good |Name|Comments| |-|-|-| | [Yishu See](https://www.linkedin.com/in/yishu-see/)|Ex-teching assistant at GA SG. Web platfrom engineer, Tech lead, Senior Software Engineer at Carousell. Previously co-founded/CTO company. |[Thong Yong Jun](https://www.linkedin.com/in/yjthong/)| Strong education background: Awarded Magna Cum Laude (i.e. with High Distinction).| |[Paul Asjes](https://www.linkedin.com/in/paul-asjes-4a903a18/)| Developer at Stripe| |[Sumit Chaudhari](https://www.linkedin.com/in/sumit-chaudhari-120b7145/)| Keywords: WebGL, Mobx, Typescript | #### Above Average |Name|Comments| |-|-| |Accidentally deleted name, need to find name.|Past working experience in UK & Spain tech companies. Tech keywords: Testing (Mocha, Karma), NPM etc. Looks better than average front-end dev #### Average |Name|Comments| |-|-|-| |[Robert Wan](https://www.linkedin.com/in/robert-wan-4a3572138/)| Have worked at Accenture, IBM but no indication of strong technical skills |[Danny Cha](https://www.linkedin.com/in/danny-ck/)| 6Y experience ATAL Engineering p.s I have come across some outstanding candidates but did not reach out because I highly doubt they would move to HK - E.g * [Charlie Gerard](https://www.linkedin.com/in/charliegerard/): - Recently move from Australia to Amsterdamn to join Netlify * [Chen Hui Jing](https://www.linkedin.com/in/huijingchen) - Founder of her own company * [Vito Chin:](https://www.linkedin.com/in/vitochin/) - He's working in Microsoft. Have always worked in large-established company * [Paul Asjes](https://www.linkedin.com/in/paul-asjes-4a903a18/) - He's working in Stripe in SG * [Inian Parameshwaran](https://www.linkedin.com/in/inianp/) - Outstanding educational background, Founder of his own tech company. Loves anything related to web-performance and security.