Pfizer – Train Yourself – Front-End Software Engineering

Motivation/Rationale

JavaScript is the most widely used language in the world, known as one of the most versatile and effective technologies used extensively for developing web applications. Its proven value, primarily for running reactive apps in the browser, led to developing back-end systems as well (e.g. node.js). Hence, Javascript has finally been established as a cornerstone of a full-blown web stack that fully spans front-end, back-end and database development in an efficient manner. However, it becomes overwhelming to create (and maintain) a nice complex web app with JavaScript and jQuery only. Thankfully, the new lightweight and sophisticated Javascript libraries boost the massive growth of modern web applications that implement complex front-end logics with guaranteed user experience level.

React.js is an open-source, component-based front end library responsible only for the view layer of an MVC web application. Its fundamental principle is to divide the user interface into composable components, as a clear way to promote a business-forward mindset and a strong concept of code reusability. More specifically, React has gained a lot of attention due to the following core characteristics:

• Reusable Components

React relies on reusable code snippets that reflect a particular part of the user interface. Each component has its own internal logic and decides how it should be rendered. This approach has some amazing results, e.g. your app has consistent look and feel and code re-use makes it easier to maintain and grow your codebase.

• High performance

Virtual DOM (short for Document Object Model) is the core reason why with React we can create fast and scalable web apps, even in realistic cases of high user interaction and view updates. In these real-life use cases, refreshing the whole DOM is often a performance bottleneck that needs particular attention. React tries to solve this problem by keeping DOM in memory (hence virtual DOM). Any view changes are first reflected to virtual DOM, then an efficient diff algorithm compares the previous and current states of the virtual DOM and calculates the minimum updates needed to apply these changes.

• Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

• Fast learning curve

React is not a framework, but a lightweight library that is consistently used in association with other Javascript libraries. Hence, there is a shorter learning curve involved in understanding React compared to other alternative solutions.

• React Native

It can be viewed as an extension of React’s logic to the area of mobile applications, e.g. android and iOS. The way to move ahead to React Native is pretty easy, as Reach supports a kind of “learn once write anywhere” mindset. Although Reach Native is somehow different from Reach itself, the architecture and principles are kept the same to alleviate an easy and smooth transition.

The above unique characteristics of React makes it extremely popular in job postings. The demand also follows this increasing trend, according to GitHub reports.

Duration

This specific Code.Learn program lasts 2 Weekends (Friday evening, Saturday & Sunday) with 40 hours of lectures and hands-on exercise on real-life case studies and projects via virtual classroom environment and online collaboration platforms.

• Weekend 1
  -Friday 20/11 (18.30 – 21.45)
  -Saturday 21/11 (10.15 – 17.45)
  -Sunday 22/11 (10.15 – 17.45)
• Weekend 2
  -Friday 20/11 (18.00 – 21.15)
  -Saturday 21/11 (10.15 – 17.45)
  -Sunday 22/11 (10.15 – 17.45)

Key Objectives – Curriculum (High Level):

This program will present, explore and adequately cover with extended hands-on sessions & real-life case studies the following areas:

• SPA (single page applications)
• ES6
• Package manager (npm)
• Presentational and Container components
• HOC / render props
• React Hooks
• ContextAPI
• React.lazy and Suspense
• React Portals
• Project setup & specs
• Compilers/Bundlers (Babel/Webpack)
• Deployment
• Redux
• Strore
• Actions and action creators
• Reducers
• Selectors
• Middleware (thunk)
• Sagas
• Testing react components (Jest – react testing library)
• MobX
• React Router
• Project presentation by the Teams

Virtual Classroom

The lessons will be carried out in an online environment as a virtual classroom, with live connection with the instructor through video conferencing.

Target Audience

Computer scientists, software engineers and developers that want to boost their career as web developers (client side, server side, full stack) are welcome to participate to this code.learn program and unlock the full potentiality of the topics taught by upskilling their future career.

Participants are expected to have:

• HTML, CSS, JavaScript, Git and CLI (bash) hands-on experience
• Knowledge of React or any other front-end framework
• Energy, initiative, and a positive attitude
• Teamwork spirit and strong communication skills
• Fluent English (written and spoken)
• Fulfilled military obligations (For Men)