Explore a Library
This project is intended for you to learn something about JavaScript more deeply than we have time to cover during class.
Since there are so many JavaScript libraries (and more coming out each day), learning a JavaScript library, or parts of one, that you do not currently know is a good place to start.
As a web developer, you should do this: Stay informed. Keep up-to-date with the developments in web standards, be curious, be playful, keep on top of it all. You're lucky enough to work in an industry based on sharing knowledge, so follow some of the people and websites I mention in this book, send your own sources, get on Twitter, go to local web development community meetups. Stay involved and be active. There's never been a more exciting time to work in web development, but you'll need to put in an extra shift to really take advantage of it. — Peter Gaston from The Modern Web
You can choose a library that will help you in your career aspirations, or one that is hot right now, or one that makes it easy to make something cool. Choose something that has adequate online tutorials and documentation since we may not be able to help you if you choose something obscure. To get you started, here are some suggestions or here is this more exhaustive list:
- Angular: provides data-binding, controllers instead of callbacks, and other dynamic features
- Ember: an "opinionated" library that provides "a framework for creating ambitious web applications that doesn't waste your time"
- React: provides components to make it easier to build interactive cross-platform (Android, iOS, Web) apps
- Meteor: uses publish–subscribe pattern to automatically propagate data changes and produces cross-platform (Android, iOS, Web) code
- Backbone: gives structure to web applications by providing models with key-value binding and custom events
- D3: provides support for visualizing and interacting with data
- Three: provides support for rendering and interacting with 3D objects
- Pixi: provides support for creating games
You may also want to explore languages with a different syntax that compile to JavaScript to be run on the web:
- CoffeeScript: a language that attempts to clean up JavaScript's "gorgeous heart underneath that awkward Java-esque patina"
- Elm: a language that is "delightful" and provides "reliability, great performance, and no runtime exceptions"
- TypeScript: a language that helps make "JavaScript that scales" by providing "static checking and code refactoring"
Next you need to implement an application to show off what you have learned in your exploration. It needs to be something that shows a "reasonable" amount of programming (think of the assignments in the course so far). Remember that some tasks are very easy in some languages and difficult in others, so your page should show off what makes this feature useful rather than simply doing a different version of something we have already done. You are welcome to look at online tutorials, but your web page should be clearly different from any given examples (i.e., make your page your own, do not simply copy one). As usual, any code copied must be: attributed to its source, limited to 5 lines, and commented in your own words as to how it works.
I strongly suggest you focus on one specific technology or feature to learn for this project so that you can go into depth rather than trying to combine several things with only a shallow understanding. You are encouraged to explore a technology you think will be useful for your final project to begin to work out some of its details.
Demo
You will schedule a 5-minute demo with the course staff to demo your work. In addition to showing the functionality of your site and the code you wrote, you will be asked questions to verify that you have more than just a surface understanding of the technology you explored.
Your application must be accessible from GitHub Pages at all times. That means if it requires a backend component to run, that it must be deployed to a host somewhere other than your personal machine. Duke's VMs or Heroku are good free options to host your application.
Submission
This project will be added to your assignments-portfolio-GIT_SCREEN_NAME
repository so there is one single place we can go to find your work during the semester.
To submit this project
- create a new folder within your
assignments-portfolio-GIT_SCREEN_NAME
folder namedexplore
- within that folder put
- HTML page, CSS style file(s), JavaScript file(s), and JSON data file(s)
- any local images used to make your page
- a README file (in plain text or Markdown format) describing your work on the project
- name the technology you chose to explore
- describe what made you choose it and what features your page is trying to show off
- include any instructions necessary to run or build your application if it cannot be loaded directly within a browser (like what is included in the Vue template README file)
- then add three very obvious links on your Portfolio web site to
- the page you have made
- at least two links to web pages you used as your starting point
Your files must display the way you expect in the latest version of Chrome. You are expected to follow the standard coding conventions for HTML, CSS, and JavaScript (within reason). Your code must validate using the W3C HTML, CSS, JavaScript (within reason), and JSON validators online.
Only what is in your assignments-portfolio-GIT_SCREEN_NAME
repository on GitHub at the deadline will be considered for your submission.