The state of web technologies

Learn about the concepts of web development, an introduction to popular JS frameworks, the technologies that have radically changed the way we build web apps and its market influence.

Transcript

1. WebValley The State of Web Technologies By Dler Hasan github.com/aripal
2. Dler Hasan Education • BSc Computer Engineering in Embedded Systems (3 years) • MSc Systems Engineering (3 years) Personal • Self-taught web developer (5 years) ◦ Frontend: JS ES5/ES6, jQuery, TS ◦ Backend: PHP, .NET Core ◦ Frameworks: Angular, Laravel
3. WebValley WebValley
4. Join our group Upcoming events will be posted at Meetup WebValley Kongsberg. https://meetup.com/WebValley-Kongsberg-meetup/
5. Our main site https://webvalley.no Subscribe to our newsletter at webvalley.no for early-bird access to our upcoming events along with web related tips and tricks. Meetup events are also shown here. Note: The site is in progress, more features will be added
6. Topics we’ll address 1. HTML, CSS and JS 2. The Fullstack journey 3. UI & UX 4. Types of web apps 5. JS frameworks 6. TypeScript vs JavaScript (ES5/ES6) 7. Web stats 8. WebValley
7. WebValley HTML, CSS and JS
8. HTML
9. HTML + CSS
10. HTML + CSS + JS
11. WebValley Client-side vs Server-side rendering
12. Server-side rendering
13. Client-side rendering
14. WebValley The Fullstack Journey
15. The frontend journey
16. The backend journey
17. Frontend What the user sees • Angular • React • Next.JS • VueJS • VanillaJS • jQuery
18. Backend What the user don’t see • PHP • C# • SQL • Node • Python • Ruby
19. Few relevant concepts Things you should know about • Asynchronous programming • Reactive programming • Observables & promises • Callbacks • Closure • IIFE
20. Patterns Things you should know about • MVC • OOP w/ SOLID principles • Atomic design • RESTful API
21. WebValley UI & UX
22. UI & UX User interface • What the user sees • Images, text, layout • More about the look User experience • What the user interacts with • The state of flow (the journey) • More about the feelings
23. WebValley Types of web apps
24. Web apps Dashboard Landing page
25. Mobile apps
26. WebValley JS Frameworks
27. Why do we need frameworks? • Less time to code • Less time to build features • Easy to collaborate with • Standards are already defined Routing, authentication, templating, DOM manipulation is all built for you - ready to go.
29. Angular vs React Google Developer Facebook 2016 Released 2013 Framework Type Frontend-library High Learning curve Medium HTML + TypeScript Template JSX + JS (ES5/ES6) Regular DOM DOM Virtual DOM Large apps Works great with Medium apps
30. Angular vs React - code comparison Component Component
31. WebValley TypeScript vs JavaScript (ES6)
32. TypeScript vs JavaScript (ES6) OOP Style OOP Statically Typed Typing Dynamically Typed 2012 (6 y) Released 1995 (23 y) TypeScript JavaScript
33. TS vs JS - code comparison TypeScript JavaScript
34. WebValley Web Stats
35. Most popular technologies • JS is most commonly used language - 6 year in a row • Python is the fastest- growing language
36. Most popular frameworks • Node.js and Angular are the most popular frameworks
37. Most popular databases • Most commonly used databases same as the last year is MySQL and SQL Server.
38. Active websites in the world • 1.5 billion websites • Of these, 75 % is not active
39. Summary The web is a large ecosystem consisting of many paths to take, and you can freely decide what works best for you. The quickest way to learn is by writing code (obviously) and ask lots of questions to web developers.
40. Resources • https://insights.stackoverflow.com/survey/2018/ • https://angular.io/guide/displaying-data • https://stackify.com/when-to-use-asynchronous-prog • https://hackernoon.com/angular-vs-react • https://www.usertesting.com/blog/ui-vs-ux/