1. course introduction
Download as PPTX, PDF1 like356 views
This document provides an introduction and overview of front-end web development. It discusses how everything is becoming web-based, from desktops to devices. Current trends in front-end technologies are highlighted, including HTML5 APIs, the rise of JavaScript frameworks, responsive design, and mobile web apps. Common front-end programming languages and platforms are also listed. The document outlines advantages and disadvantages of web applications, and provides statistics on the history and evolution of the web and front-end development. Expectations for the course are discussed, along with organizational details and the first homework assignment.
1. course introduction
- 2. Agenda • Web development is… • History • Front-End definition • Environment • Technical restrictions • Technologies set • Organizational questions, free talking
- 3. Current situation - Everything is a web based: • Desktop • Mobile • TV • Glasses • Watches • Cars • Homes
- 4. - Latest trends: • The HTML5 JavaScript API – Web Storage – Web Workers – Web Sockets – Application Cache • The rise of JavaScript and client-side web apps • The evolution of the front-end frameworks • Development beyond the screen • Drag and drop everything • Responsive design is mandatory, new challenges • Mobile web apps which performs like native apps • Web-components • The rise of Node.js
- 5. - Languages: • Java • Scala • PHP • Erlang • Python • Go • Ruby • Bash • Perl • .net - Platforms: • Windows • Linux • Mac • iOS • Android • Tizen • Others
- 6. Web applications Advantages: • No installation • The app will run on the browser regardless the platform • Automatic updates • Connect from anywhere • Centralized storage of all data • Might behavior as native app on mobile devises Disadvantages : • Internet is required • Hosting costs • User data is kept in the web app servers, security risks • Slower as run over the internet • Can take longer to develop as they are more complex • Have to support different browsers, and different versions
- 7. Statistics
- 11. Front-End definition • Job specific • Knowledge areas • Design & development • End-user communication
- 12. Job specific: •Unit testing •Architecture design •Writing documentation and style guides •Page load/rendering speed optimization •SEO/SMO friendly • Non-stop communication with people •Non-stop learning process •Responsive markup •Interaction programming •Backend integration •Build process optimization •Code refactoring •Solution search •Framework library troubleshooting •User stories review •Psd to html/css •Image optimization, sprites •Animation programming •Font search •Design review •Wireframe implementation •Mockup adaptation
- 13. Design & Development • if you don’t have a designer — you should became one • if you have a designer — you will need to lead him • if you don’t have other developers — you need to know more • if you have other developers — you need to know even more and teach them
- 14. End-user communication • Feedback is your most valuable data • Feedback is not only a verbal thing: o statistic, heat maps, A/B testing o survey results o verbal • Make sure you gather feedback from your target audience • Try to receive feedback on each stage of development and be flexible.
- 15. Environment • Different browsers have different features support. Strategies for supporting different browsers • It’s always changing • Nightly builds are your friends • Many versions to support at once, many vendors to support, many OS to support • Not only on a desktop, but almost everywhere
- 16. Technical restrictions Phone: •tiny viewport •fingers as the only •input device •“hurry” context •slow connection •single task Tablet: •smaller viewport •fingers as the primary – make buttons in proper size •input device •optional keyboard •“relax” context •mixed connection •single task Desktop: •wide screen •mouse/touchpad •Keyboard •“work” context – usually used for work •fast connection •multitasking
- 17. Technologies set Current course is including following technologies: –HTML/XHTML/XML/JSON –CSS –JavaScript
- 18. Organizational questions • github.com • everyone will need to create account there • name your repositories by lectures with “UIcourse_” prefix • github.com/username/UIcourse_lecture1 • push your homework and send me a message • http://my.lits.com.ua/ forum • use forum for communication with other students • you should try to use english, if you are not ok with this
- 19. Allen Rabinovich: The Many Hats of the Frontend Engineer https://www.youtube.com/watch? v=rDRr_pUl3i0 -
- 20. Homework#1 • watch Allen’s presentation • choose what hat you want to wear more than others • register account at github.com • create repository for lecture1 • push there a text file with your answer • login to http://my.lits.com.ua/ • complete your profile with photo • collaborate with others at forum, don’t be shy, create your own topic
- 22. Expectations
- 23. Questions
- 24. Thank you for attention!