Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… ·...
Transcript of Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… ·...
![Page 1: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/1.jpg)
CS294 Cutting-Edge Web Technologies
Overview
#wt294
![Page 2: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/2.jpg)
Teaching Team
And invited technology leaders from the industry
@dawnsongtweets @mitar_m
![Page 3: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/3.jpg)
![Page 4: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/4.jpg)
![Page 5: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/5.jpg)
What’s Your Favorite Web Technology?
![Page 6: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/6.jpg)
![Page 7: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/7.jpg)
What Is This Class About?
• New web technologies– What problems they try to address
– Design choices• What design choices were made
• Why were they made
– Real-world lessons & experiences
– Not tutorials
![Page 8: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/8.jpg)
Goals of Class
• Learn trends in new web technology
– Develop better apps
• Learn how to create new web technology
– Help developers develop better apps
![Page 9: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/9.jpg)
Topics Covered in Class (I)• Reactive templating engines and frameworks
– React.js, Meteor, Angular JS
• Real-time communication– Web sockets, node.js streams, WebRTC, socket.io
• ES6, new CSS, new DOM feature– Polymer, web components, shadow DOM, Flexbox
• Deployment and hosting– Heroku, Docker, Parse
![Page 10: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/10.jpg)
Topics Covered in Class (II)
• System languages
– Go, Rust, Scala, Erlang
• Concurrency & scaling
• Big data
– Spark, map/reduce, many others
• UI/UX
![Page 11: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/11.jpg)
Course Format
![Page 12: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/12.jpg)
Course Units
• 1-3 units
Units Blog post Project
1 X
2 X Applications or new web technologies
3 X Large project, new web technologies
![Page 13: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/13.jpg)
Projects
• Scope– Build a web app with new web technology
– Build new web technology
• Done in groups of three– Pick partners soon!
– Group size of 2 or 4 also allowed
![Page 14: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/14.jpg)
Project Schedule
• 2/15/2015 midnight: Project proposal due
• 3/15/2015 midnight: Milestone 1 report
• 4/19/2015 midnight: Milestone 2 report
• 5/6/2015 class time: Project screencast & demo
• 5/10/2015 midnight: Project report due
![Page 15: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/15.jpg)
Blog (I)• Weekly blog posts
– Each project group does one blog post per week – Describe three key points you have learned about the
technologies of the week• What problem they try to address• Strength• Weaknesses
– How do relevant technologies compare with each other– Due the following Sunday midnight
![Page 16: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/16.jpg)
Technology of the Week
• Technology covered in class
• Any related and/or similar technologies
– Including the ones you find yourself
![Page 17: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/17.jpg)
Blog (II)
• Summary blog posts– Each group writes three summary blog posts in
the semester
– Summarize a given week’s blogs
– Due one week after the due date of the relevant weekly blog
• Tumblr
![Page 18: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/18.jpg)
Grading
• 20% class participation
• 35% blog posts
• 45% project (for 2 or 3 units)
![Page 19: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/19.jpg)
Other Notes
• Piazza – Primary point of contact
• Waitlist
![Page 20: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/20.jpg)
Next Steps
• Identify group partners
• Next lecture: Pete Hunt from React.js, Facebook
![Page 21: Introduction to Programming - inst.eecs.berkeley.educs294-101/sp15/slides/lec1-overview.… · –React.js, Meteor, Angular JS •Real-time communication –Web sockets, node.js streams,](https://reader034.fdocuments.net/reader034/viewer/2022042223/5ec98814cd21621731505a2a/html5/thumbnails/21.jpg)
Q&A