Week 1
Project planning and development lifecycle
Getting Started
- Introductions
- Course outline
- Course resources
- BS LMS
- turn on notifications
- This Course-book
- GitHub Classroom
- BS LMS
Project Methodologies
Projects at Large
You've already had a course in project management in this program so we won't spend too much time on the discipline of project management. As you likely learned in your project management course there are many phases of a project. Depending on the scope and/or complexity of a project, there may be numerous phases incorporating an almost infinite number of tasks. To get us started in developing a web application, you can approach a project thinking in terms of three broad categories or phases;
- research and planning
- development
- testing and deploying
Depending on the project management methodology you're using, these phases could be very long extending out over the length of the entire project while other methodologies have much smaller periods of time that would incorporate some variation of these three phases that iterate many times over the life of the project. Before we get into the different phases let's learn a little bit about some of the more popular project methodologies in software and web application development.
Waterfall
The waterfall method or model of project management is sequential and non-iterative, so each step is followed by another step is followed by another step is followed by another step... This method is typically driven by a plan that has had significant effort expended into it and may be heavily coupled to internal processes and controls within an organization or bureaucracy.
Waterfall methodologies typically live in more established organizations like large corporations, government agencies etc. The waterfall method is also often associated with an engineering focus. Large organizations are often burdened with processes and controls that are required of them not just for internal purposes but also by regulation and legislation which need to be considered when developing applications.
Agile
Agile project management or software development takes an iterative approach to building a project with the goal of releasing a working product faster and capturing feedback with each iteration. Instead of investing significant effort and resources on developing a plan, Agile encourages building features and rolling out a smaller, finished product quicker. With this approach you would break your project up in the smaller chunks and then iterate over the planning, development and testing phases with each release.
Startups are likely to employ an Agile approach (if they have made it to a state where they are mildly organized) giving them the ability to react quickly to changing situations, market demands or competitive pressures. Worth noting, there seems to be a growing tendency in the agile world to move towards a software craftsmanship environment where developers and participants in the web world consider development a craft or trade.
As is often the case in IT and software development, methodologies can be like a religion. We won't go too deep down the rabbit hole but consider which one is right for the project at hand.... think of it as a tool in your toolbox that helps to build a better application. Neither one will always be the right answer and in fact you may often find that a combination of both methodologies may be the best solution.
Project Phases
As noted on the last page there are three basic phases of a project: research and planning, development, testing and deploying. If you want to be picky you could consider them five phases but the overarching theme is that research and planning is part of preparing for your project, development is the building phase followed by testing and deploying. You want to make sure it works, meets requirements and roll it out to the user. Let's break those three over-arching phases into a few subcategories to give you an idea of some of the steps and things you need to consider in your plan for your web application.
Research & Planning
Requirements
In the planning phase there's a few things to consider. The most important being what are the requirements... what is it that the app is supposed to do?
To think of it in terms of this course, each of the assignments like the midterm and the final project will have a set of requirements. A set of basic minimum criteria that the application needs to meet and this will be the same in every project you work on in your career. In this context the requirements are set by a professor or teacher but in the future they may be determined by a client or a user if you're part of an internal IT team building a tool in an enterprise.
Your Audience
Another item of the planning phase you want to consider is who your audience is... who is the person sitting in front of the screen using the keyboard and the mouse or touching their tablet to interact with your application. These are the people who will ultimately determine whether your app is successful or not.
There's a few ways to determine who your audience is. Research goes along way but you will want to develop a persona or several personas that represent the majority of your users. Once you have personas attached to the project, you can make design and development decisions based on the expectations that the personas you developed may have.
Developing scenarios that involve the persona(s) will help you understand how the app will be used. Scenarios will give you insight into the persona's routines how your app will be used (or not) in different situations in their day-to-day lives. Scenarios will help you see the commonalties between the majority of the users and give you insight into how do you up might be used.
UI/UX
Once you have the requirements of your project, you know who's going to be using it and you have a good idea how it will used it's time to start planning the user experience and user interface. One of the tools available to designers and developers to accomplish this is wire-framing.
There are a few different phases to wire-framing as well. You could start with low fidelity drawings... that is just pencil and paper and take them to your users and get feedback. It doesn't have to be users though, you could also ask for feedback from people on the team or even friends. Once you get some feedback you can move on to more formal designs using a wire-framing application like Experience Design. Maybe you're Illustrator fan or Powerpoint is more your thing. It doesn't matter which tool you use but the point is to iterate on your designs until you have a solid foundation from which to move forward with into development.
The Tech Stack
The tech stack is the group of technologies used to develop the app and/or the platform it's deployed on. You might build a responsive app destined for desktop, mobile and tablet so you need consider all the possible technologies your application may be deployed to. In addition to considering the technology that's going to be used when the application is consumed by users you'll want to consider the technology needed to build the application. You may need to use specific technology or software to develop the application for a specific group. In web application development this is not as constraining as building native software but depending on the project and use case, there may need to use specific technology at some point the development lifecycle.
Alright, we took some time researching and planning the project. We know what our requirements are, we have an idea what our target audience looks like and how the users are going to consume the application. With this in mind it's time to start moving on to the development phase.
Development
This is where things start to get exciting but before you start writing code there is still a little more planning. Now, this may fall in your planning phase or at the beginning of your development phase but it's something that you want to give some thought to and that's how you are going to put it all together. What are the programming styles or design patterns that you're going to use or is there anything you'd like to try out. You'll want to think about what your data models look like if you're passing data back-and-forth between modules or functions or consuming an API. It's helpful to develop a plan of attack for development because the deeper you get into the project, the harder it will be to incorporate new ideas, patterns or methodologies.
Backup, backup and..... backup?
During development there should be a couple of safe guards in place. You should have a back up scheme in place and you should also use some sort of version control. We don't need to spend much time talking about back up schemes. Everybody is aware of the importance of backing up their data. Keep a copy in the cloud and a local copy.
git
Git is a free and open source version control system. A version control system notes and records changes to a file or set of files over time allowing you to recall or revert to previous versions. Having a system in place that allows you to revert to a version of your application that worked after you break something is a great thing to have at your disposal. Believe me, you will break something and you'll be thankful that you have something to easily fall back to.
Check out the html version of this book for more information.
Also check out this short video tutorial by Tower Git:
Testing & Deploying
Testing or performing quality assurance (QA) on your application ensures that you're meeting the requirements specified by your client or in our case by your teacher or professor. It's a confirmation that the application does what it's supposed to without any surprises or errors.
There are a few different testing cycles... you may of heard of alpha, beta and release candidates.
An alpha release is a version with some of the features in place and functions as expected.
A beta release is typically feature complete... that is no new features will be added. This release focuses on quality control catching any unknown bugs, fixing them and prepping for the release candidate.
The release candidate is the version of the project that is code complete and barring any fatal bugs or errors will be the version released. The developers have agreed that no new code will be added and the application will again be put through it's paces possibly by a select group of actual users.
Wrap up
Considering the context of where you are in your career at the moment now you'll likely be focused more on trying to get code to work. Understanding intermediate and more advanced features of HTML, JavaScript & CSS or what web components are, or the different frameworks that are available. However, if there's one thing that you take away from this module it's that if you can keep the requirements and your users in mind when your building, it will keep you on track to delivering a great we application.
UI/UX
A little UX refresher...
I think we would all agree that user experience is an important aspect to developing a great web application or any piece of software for that matter whether it runs on a Mac, PC iPhone or Android. User experience is not something that is constrained only to software development. User experience is a conceptual discipline that applies to everything that we use.
You may want to refer to your notes from your previous UX courses but the following is a quick reminder of some of the important aspects of UX.
- User Research
- Personas
- Scenarios
- Information Architecture
- Wireframes
- low fidelity
- high fidelity
- Visual Design
- Prototyping
- Testing
Google has put together a well documented design guide called Material Design
Apple has an extensive Human Interface Design Guide
Here are some great practical guidelines for UI design from the folks at Cornell:
ERGONOMIC GUIDELINES FOR USER-INTERFACE DESIGN
UX/UI Prototyping Tools
One of the most popular tools is Sketch. There is a 30 day free trial and good tutorials. If you like it, there is 50% student discount.
Adobe XD is a great prototyping tool included in your Adobe Creative Cloud subscription.
Another tool is Invision
Midterm Project Due Week 7
The Midterm project will be the focus of our activities for the first half of the semester. It is worth 20% of your final grade and is due in Week 7, but you need to start today!
Review the Midterm Project details here.
Assignment 1: Midterm Proposal Due Week 2
Write a one-page brief proposal stating the intended product that will be created for the Midterm Project. Include the site's type, topic, and intended audience.
Self Study Resources - Week 1
Wikipedia: Agile software development
Atlassian (makers of the Jira software project management tools) has a great series of articles that explain the whole agile process in practical terms: Atlassian Agile Coach
This a great article on what might be some dated tech but the fundamentals still hold true.
For a refresher on JavaScript - hint, you'll need it later in this course - check out Steve Griffith's JavaScript from the start