Nie wiem czy to ja i bagaż moich doświadczeń, czy ogólny trend obecnie panujący, ale odnoszę wrażenie, że coraz więcej osób myśli o “przebranżowieniu się”, a za swój cel obiera właśnie branżę IT. Niezależnie jednak czy jesteś na początku swojej kariery zawodowej, czy chcesz diametralnie zmienić ścieżkę swojej kariery – chciałbym zaznajomić cię z pracą frontend developera od tej bardziej technicznej strony. Nie mam zamiaru bawić się w coacha, trenera, mentora i mówić jaki powinien być właściwy “mindset”, ale opowiedzieć historię moich początków jako frontend developera (pierwsze `npm ini`), aż po… udany deploy. Co, jak i dlaczego jest używane jest przez zawodowego frontend developera? Na jakie technologie warto zwrócić uwagę? Które są niezbędne, a które warto poznać w późniejszych etapach kariery?

1. Robert Goik
A więc chcesz zostać frontend
developerem?
Subiektywny poradnik frontend developera

2. The Handbook
Current edition

3. Easy start

4. Get In Touch

5. My React App
Let’s start

6. Git
basic

7. Readme
Writeme, maintainme

8. My React App
Hello from CDN
index.html
index.js

9. My React App
Hello from CDN

10. Package manager
and more

11. Node

12. My React App
Zero con
fi
g Webpack

13. Simple React App
Zero con
fi
g Webpack
src/index.js

14. Simple React App
Build

15. Simple React App
The App
dist/index.html

16. Because we are lazy
and e
ffi
cient

17. Essential tools
Before we start

18. Essential tools
Prettier for formatting
.prettierrc
https://prettier.io/

19. Essential tools
linters for catching bugs
.eslintrc.js
https://eslint.org/

20. Also very helpful
Husky improves your commits
https://typicode.github.io/husky/#/

21. My React App
Prettier, eslint, husky

22. My React App
for real

23. Semantic versioning
Publisher
1 . 0 . 0
breaking
change
new
feature
bug
fi
x
Major Minor Patch

24. Semantic versioning
User
patch releases minor releases
major releases
1.0 1.0.x ~1.0.1 1 1.x ^1.0.1
* x

25. Semantic versioning
Install

26. Package manager
The horror! The horror!

27. Semantic versioning
Real world issue

28. nconf - tags
fi
rst page

29. nconf - tags
last page

30. nvm
nevermind node version manager
https://github.com/nvm-sh/nvm
https://github.com/coreybutler/nvm-windows

31. nvm

32. The Trinity

33. HTML
most popular programming language :)

34. CSS

35. My React App
CSS
webpack.con
fi
g.js

36. My React App
CSS
src/index.css
src/index.js

37. My React App
CSS Modules
webpack.con
fi
g.js

38. My React App
CSS Modules
src/index.module.css
src/index.js

39. My React App
CSS Modules

40. JavaScript

41. Babel
source
fi
le

42. Back in the day
JavaScript

43. Babel

44. Babel

45. JavaScript => TypeScript

46. TypeScript

47. TypeScript
source
fi
le

48. TypeScript

49. TypeScript
Compiled

50. My React App
try Babel
babel.con
fi
g.json

51. My React App
catch
webpack.con
fi
g.js

52. My React App
JSX…
fi
nally!

53. Clean Code
Robert C. Martin
https://www.slideshare.net/slideshow/embed_code/
key/EqGmgLPLAo7dlN
Od frontu do backend
dwa oblicza SOLIDnego kodu
by Bożena Pietrzak & Marcin Gajda

54. Clean JavaScript Code
https://github.com/ryanmcdermott/clean-code-javascript

55. Clean Code - examples
Use searchable names

56. Clean Code - examples
Avoid side e
ff
ects

57. Readable code
my short story

58. The Zen of Python

59. Deploy to S3

60. IAM

61. Github actions
http://uszanowanko-frontend.s3-website-eu-west-1.amazonaws.com/

62. The Code
https://github.com/roberuto/my-react-app

64. There is more…

65. Micro frontends - how not to ;)
my broken app
http://core-aws-mf.s3-website-eu-west-1.amazonaws.com/
https://gitlab.com/robert.goik/primary-videos

66. State of frontend
https://tsh.io/state-of-frontend/

67. THANK YOU