21
CS294 Cutting-Edge Web Technologies Overview #wt294

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,

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

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,

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,

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,
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,
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,

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,
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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

Q&A