REACT ADVANCED WORKSHOP

December 10th & 11th 2020 | 09.00-18.00 EET (Bucharest)
live interactive (zoom)

 

SHORT DESCRIPTION

Bringing you expert-led workshops, actionable and motivational insights this powerful event will help you stay ahead of the game, be inspired and boost your career.

Join us in this two-days REACT ADVANCED WORKSHOP which covers the journey from defining your project module architecture all the way to deployment. Every module covers the best practices for testing strategies. Due to the fact that React has a pretty big feature ecosystem around it there are multiple checkpoints that will allow us to analyze and troubleshoot case studies that you would run into in production environments both in terms of feature requirements and performance measuring and troubleshooting. Each module will contain recommendations for tools to use in each scenario in order to achieve the best results and have your project laid out in a way that facilitates extending and a tighter feedback loop that is in line with good DevOps practices.

 

BENEFITS

Get an understanding of testing strategies.
Learn how to make continuous deployment for react app.
Good template for starting development on modern React apps.

THIS CLASS IS FOR

People having worked with React on a few projects and looking to take development to the next level and develop more reusable components and structure their apps in a more extensible fashion.

PREREQUISITES

Good working knowledge of NodeJS.
Good working knowledge of VSCode.
Recommended browser: Chrome.
Working knowledge of components and ReactJS.
Basic working knowledge of Redux.

DURATION

16 hours (2 days) – 09.00 – 18.00 EET (Bucharest)

 

PRICE

500 Euro standard access

GROUP DISCOUNTS: 5% (3 to 5 tickets), 10% (+6 tickets)

 

LIST OF TOPICS

Day/ Lesson 1

  1. Project Architecture
    1. Tools to use for organizing your project
      1. Lerna, Rollup/Webpack, Yarn
      2. Structuring the project build and dependency management
    1. Atomic Design and components architecture
      1. What is Atomic design?
      2. Overview of how your project should be structured
      3. Storybook and creating component libraries
      4. Building components and themes
      5. Design System – typographies and grid systems
      6. Dumb components in storybook with containers in the project
      7. Render Props, Higher Order Components
    1. State Management
      1. State Management, middlewares, tooling
      2. Implementing custom middlewares
      3. Authentication, side effect middlewares
      4. Redux state structure
      5. Redux Performance
  1. Case study: multiple data sources for components
    1. What are the common performance issues in Redux?
    2. What middlewares can be used for managing multiple dependent side effects?
    3. How should your data be structured in the redux store?
    4. Where should the state live in your project?
    5. How to use or build your own  middlewares and store enhancers?
    6. How to debug and troubleshoot  redux?

Day/ Lesson 2

  1. Testing & Deployment
    1. Testing Architecture
      1. Writing tests for component library and the main app – testing pyramid
      2. Tools and libraries
    2. Performance diagnostics & testing
      1. Common causes for performance issues (VirtualDOM implementations)
      2. Perceived performance vs actual performance
      3. Tools for measuring and diagnosing performance
      4. Accessibility performance improvements
    3. Deployment pipelines
      1. Using a Circle CI pipeline for deploying component library for preview
      2. Using CircleCI for deploying app
      3. Dependency management in production
      4. Github third party apps to make library management easy
      5. Conditional deployment with monorepos
  1. Case study: performance component analysis and testing
    1. What are the tools to use for diagnosing performance issues?
    2. How to implement performant rendering in your app?
    3. How do you lazy load components?
    4. How do you improve your pipeline for deploying only changed code?
    5. What layer of the testing pyramid should you test each of your components at?

CREDENTIAL

Certificate of Completion

ABOUT THE TRAINERS

Simona COTIN | developer advocate @ Microsoft
Bio: Simona is a web developer with a passion for teaching. She spends most of her time tinkering with JavaScript in the cloud and sharing her experience with other developers at community events like meetups and conferences or online. As a Cloud Developer Advocate, Simona engages with the web community to help create a great developer experience with Azure. She loves shipping code to production and has built network data analytics platforms using Angular, Typescript, React, and Node.

Artur DASCHEVICI | full stack engineer

Bio: Passionate about all things tech-related, with a wide area of expertise ranging from backend, DevOps, Front End, working with Django, React, React Native. Artur is a full stack developer with more than 10 years of experience in multiple parts of the application stack, experienced trainer, and passionate coder consulting on independent projects. Part-time speaker.

 

#MasterYourCareer #NewPerspectives

BOOK A SEAT