A Nordic Coder Course for Front-end Developer

1. Front-end Web Development
with Reactjs
NordicCoder

2. Confidential July 2018
Learn practical skills for your career growth

3. About
Nordic Coder is an educational institution that aims to transform the IT workforce
by taking the learning -by -doing approach to education.
With the vision of bridging the under-skilled supply of IT students with the shortage
of demand for skilled IT workers, Nordic Coder provides a platform offering
practical short-term training courses for IT students to gain real-world skills to meet
industry demand.
Nordic Coder is a venture by fram^, a Swedish-Vietnamese start-up venture builder
and IT development company listed on Nasdaq First North Stockholm.

4. What we offer
0
1
SOFT SKILLS
Improve interview performance with
CV polishing skills and one-on-one
practice.
0
2
TECHNICAL SKILLS
Practical application of programming
languages in real business cases.
0
3
CAREER GUIDANCE
Job search and networking
opportunities with hiring partners.

5. Venture Founder
Yen Le
Yen recently joined Fram^ as Venture Founder for Nordic Coder. Yen used to
served as Partnership Manager and part of the founding team of the Da Nang
Business Incubator, where she collaborated with corporate, government and
international donors to bring in accelerator managers, serial entrepreneurs
and investors from Israel, Canada, U.S Finland, to coach more than 30 local
startups and help them become investment-ready. She was the key organizer
of SURF, an annual startup conference that attracted 2000+ attendees and
high-profile speakers since 2016. Prior to that, Yen worked in infrastructure
financing, lending sovereign loans to private companies from the World Bank
and French Development Agency and preparing the issuance of the Da Nang
government bond in 2014. She holds a Bachelor of Business - Banking and
Finance at Monash University, Australia.

6. fram^ is a Swedish-Vietnamese start-up venture builder and IT
development company which listed its shares on the Nasdaq First North
Stockholm in Oct 2017. fram^ starts, builds and invests in technology
companies with proven business models. We provide deep operational
support to founders and help them build market-leading companies. We
have many ventures in the pipeline in the verticals FinTech, InsurTech
and eCommerce/Consumer with the aim of improving lives of
Vietnamese people. The founding team of fram^ has built and managed
market leading online businesses both in Europe and Southeast Asia. The
founders of fram^ co-founded Lazada.vn and built the company from
scratch to the market leader of e-commerce in Vietnam.

7. Introduction
export class Instructor extends React.Component {
render() {
return (
<Profile>
<Fullname>Trần Phong Phú</Fullname>
<Work>TA at Sendo.vn</Work>
<Work>React Instructor at NordicCoder</Work>
<Email>phu.tran[at]nordiccoder.com</Email>
<Phone>0937.942.974</Phone>
</Profile>
);
}
}

8. My mission and motivation as an instructor is
to help you free your mind, unleash your power
within, and reach one step closer to your dream.
Introduction

9. Tell us about yourself
Introduction

10. Course Outline
3-4th Week
Advanced React
Event & Data
6-7th Week
Advanced Reactjs
Ecosystem of Reactjs
Redux
1-2nd Week
Getting Started
React Basic
5th Week
Mini workshop
Soft Skill Development
8-9th Week
Webpack Configuration
Deployment - Production
Final Project
10th Week
Demo Day

11. Final Project - Online Shopping Cart

12. Final Project - Online Shopping Cart

13. Week 1 Agenda
● Group breakout session: 15 mín for each group
● Each group will have 5-10 minutes to present
● Class discussion
● What is component
● Why component
● Second Demo
● What is Reactjs
● Why Reactjs
● Development Tools, Audit Tools, Showcase, First Demo
● Getting Requirements, BA, Design
● Coding, Unit Testing
● QC, Testing, Release
● The Past
● Now 2018
● Future

14. Web History
Web Versions
Web Browsers
Web Desktop and Mobile

15. Web Version
Web 1.0
Web 2.0
Web 3.0

16. Web Browsers
<=1995
Netscape
Opera
IE
1997
Adobe Flash
2003-2004
Safari
Firefox
2005-2006
XHR2
2008
Chrome
HTML5
201X

17. Desktop vs Mobile

18. Discussion
Will websites be killed by Mobile App?

19. Steps to build a website
01
04
03
02Getting Requirements
Collect all client requirements
Design UX/UI
Production
Deployment
Monitoring
Development
Coding
Writing Unit Test
Quality Control
Testing
Fix bugs

20. Steps to develop a website

21. Frontend Web - Stack Of Technologies
CSS Framework
● Bootstrap , Foundation, Ant
● SASS, Less, PostCSS
2
HTML + CSS + Javascript
● jQuery , jQuery UI
● Underscore
1
Module Bundler
● Webpack , Parcel, Rollup
● Browserify
● Gulp, Grunt
4
Javascript Framework
● Reactjs , Angularjs, Vuejs
● Redux
● Jest, Enzyme
3

22. Git Star Comparison
Reactjs
Angular
Vuejs

23. NPM Download Comparison
Reactjs
Angular
Vuejs

24. Indeed Job Comparison
Reactjs
Angular
Vuejs
(*) Indeed.com, 60k jobs

25. Reactjs Introduction
A Javascript Library for building User Interface

26. Reactjs In Developer Mind
Reactjs
Redux
Webpack
Nodejs

27. Why developers love Reactjs
Modular
Reusability & Scalability
High Performance
Strong Community
Great Development Tools

28. Reactjs Pros vs Cons
Easy to Learn
Virtual DOM
Component Design First
One-way Data Binding
Debugging
Hard to Master
JSX
Complex Comp. Design
Flux Pattern
View Layer

29. Reactjs Core Features - Virtual DOM
REAL DOM
VIRTUAL DOM

30. Reactjs Core Features - Flux Achitecture

31. Reactjs Core Features - Flux Achitecture

32. Reactjs Demo

33. Reactjs Application
Single Page
Application
Progressive Web
Application

34. PWA

35. PWA 10 Rules
Progressive
Responsive
Connectivity independent
App-like
Fresh
Safe
Discoverable
Re-engagement
Installable
Linkable

36. Reactjs in Viet Nam
Tiki
#27
Shopee
#17
Lazada
#20
Sendo
#31
Chotot
#47
Coccoc
Search
#1
(*) https://www.alexa.com/topsites/countries/VN

37. Showcase & Audit Tools
React Extension
Chrome Developer Tool
Page Speed
Think With Google
Code Splitting Showcases

38. Reactjs Component
React Bootstrap Components
React Ant
Awesome Components

39. Demo Reactjs Component

40. OpenTalk - How to be a FE Developer

41. Web Developer Roadmap

42. Web Developer Roadmap

43. Web Developer Roadmap

44. Web Developer Roadmap

45. Web Developer Roadmap

47. Assignment
Find 5 sites in Vietnam using Reactjs
Compare 5 sites found with Google PageSpeed
Code and Submit first assignment

48. Q&A