Frontend Overview
The browser
- has been evolving for more than 20 years
- recognizes the multitudes of interests that exist within a web application
- is mostly open, transpent and easy-to-use
- privides a built-in IDE for debugging and analysing your application
Parts of an web app's frontend:
- Html, Css, JavaScript
- Tests, Documentation
- Configuration and Localization strings
- Images, Sounds, Videos, Fonts
- and all the supporting infrastructure
Concepts:
- DOM, Rendering, the Event loop
- Networking (Ajax) - Headers, Query Params, etc
- Web APIs: History, Routing, Storage, Caching
- Web APIs: Geolocation, Canvas, Audio
- Security
- Tracking, Analytics and Ads
- Web Components, Web Workers, Web Assembly
Displaying a static page
Displaying a scripted page
Technical trade-offs:
- Single Page vs Reloading
- Server side vs Client side rendering
- Newer features vs older browsers suppot
- Resource bundling vs no build step
- Various tools and framework choices
- Various design and usability choices
Application structure
Model-View-Controller
vs
Components
Two-way binding
vs
Unidirectional data flow
Frontend Frameworks
- Angular
- Aurelia
- Polymer
- React
- Vue
and many others
Security
- Code injection (XSS)
- Malicious communication (Tracking)
- Data Leak / Loss (Phishing)
- Dark patterns
Links:
Course Schedule:
| week 1 03.02.2017 | History of the web | Fullstack Principles | Development Processes | Agile Processes | DevOps Basics | Git |
| week 2 10.02.2017 | Frontend Overview | Backend Overview | Network Overview | Testing | JavaScript Overview | JavaScript Tooling |
| week 3 17.02.2017 | Web Architectures | RESTful principles | SOLID principles | Web Components | Continuous Integration | |
| week 4 24.02.2017 | Databases basics | Using APIs | Deployment Automation | Monitoring | In-class project consultations | |
| week 5 17.03.2017 |
Project presentations Final Test Course Retrospective and Q&A |
|||||