Lecture1

1. Hello WebUI Course
Lecture 1

2. Agenda
• Intro
• Web development is …
• FrontEnd definition
• Environment
• Technologies set
• Organizational questions, free talking

3. Web development is …
• current situation
• languages and platforms
• history

4. Current situation
Everything is a web based
desktop mobile tv
glasses watches
cars homes

5. Languages and platforms
• Java
• PHP
• Python
• Ruby
• .NET
• Scala
• Erlang
• GO
• Bash
• Perl
• windows
• linux
• mac
• iOS
• Android
• and many many more

6. History
http://www.evolutionoftheweb.com/
http://upload.wikimedia.org/wikipedia/commons/e/e4/
Web_development_timeline.png
http://web.archive.org/web/20020915084217/http://
www.yahoo.com/

7. FrontEnd definition
• job specific
• knowledge areas
• design & development
• end-user communication

8. Job specific
• Psd to html/css
• Image optimization,
sprites
• Animation
programming
• Font search
• Design review
• Wireframe
implementation
• Mockup adaptation
• Responsive markup
• Interaction
programming
• Backend integration
• Build process
optimization
• Code refactoring
• Solution search
• Framework library
troubleshooting
• User stories review
• Unit testing
• Writing documentation
and style guides
• Architecture design
• Page load/rendering
speed optimization
• SEO/SMO friendly
• Non-stop
communication with
people
• Non-stop learning
process

9. Knowledge areas
Allen Rabinovich: The Many Hats of the Frontend Engineer
https://www.youtube.com/watch?v=rDRr_pUl3i0

10. 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

11. End-user communication
• Feedback is your most valuable data
• Feedback is not only a verbal thing:
• statistic, heat maps, A/B testing
• survey results
• verbal
• Make sure you gather feedback from your target
audience

12. Browsers and platforms
• Different browsers have different features support
• 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

13. Technical restrictions
• wide screen
• mouse/touchpad
• keyboard
• “work” context
• fast connection
• multitasking
PhoneTabletDesktop
• smaller viewport
• fingers as the primary
input device
• optional keyboard
• “relax” context
• mixed connection
• single task
• tiny viewport
• fingers as the only
input device
• “hurry” context
• slow connection
• single task

14. 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 — use any
other language

15. Organizational questions
• All lecture slides will be published at http://
my.lits.com.ua/
• before next lecture I’ll fill calendar
• our next meeting is on Thursday
• Deadline for your homework is Saturday

16. 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