今日推薦開源項目：《術語參考 whatthefuck.is》
今日推薦英文原文：《Building an Application: Pre-Work》
今日推薦開源項目：《術語參考 whatthefuck.is》傳送門：項目鏈接
推薦理由：這個項目是一個剛剛建立的前端相關術語合集，解釋諸如閉包之類的常用術語。儘管現在還處在項目早期，僅有閉包這一個辭彙的解釋，不過在 PR 中貢獻者們已經提到了相當多的常用術語，隨著時間經過想必它的內容能夠更為豐富。
今日推薦英文原文：《Building an Application: Pre-Work》作者：Hannah Kofkin
原文鏈接：https://medium.com/better-programming/building-an-application-pre-work-eafb660fa55e
推薦理由：開始應用前的必要準備實現
Building an Application: Pre-Work
5 steps to improve organization and workflow from day one
Building an application can be extremely complicated and time-consuming. The workflow you establish when starting your project will be the baseline for how everything to follow unfolds. If you start off disorganized and unclear, your app will suffer from it. Taking the time to develop an organized plan and set milestones from the beginning will ensure your final product can achieve its full potential.Let』s walk through some standard pre-work checkpoints you can use to develop a standard process for building an app. Here are the five steps to take before you jump into code mode.
1. Outline Features
When you have your app concept determined and are ready to start laying the groundwork, one very important first step is to decide what you actually want your app to do and how you want it to function. Writing out a list of features is a good way to compile and condense your thoughts. There are endless possibilities, so narrowing your focus from the start will eliminate wasted time down the road.Once you have a list of features, thinking through your MVP (or minimum viable product) is crucial. The MVP is basically the state in which your app is fully functional and able to be tested in the market for user feedback, but it leaves out some of the 「stretch」 features that can be added once you know your app is on track. Reaching MVP and testing in the market is useful to ensure your resources are not wasted on something that is either not necessary or is not working properly. A great tool I have used to start outlining features and deciding on MVP is Trello.
If this step is skipped, you run the risk of trying to execute too many ideas or trying to build a feature that doesn』t relate to your user story. This is not only a waste of everyone』s time but also adds to a lack of clarity in the process and will only lead to frustration.
Questions to ask yourself
- What do I want my app to do?
- What will make my app unique compared to other similar apps?
- What is the minimum viable product I can launch with and what can be added later?
2. Develop Domain Model
Once the features are outlined and MVP is determined, a sensible next step is to figure out how the database will be organized. Drawing out a domain model using your features as a guide will help to visualize how the app will save and use data.Similarly to how an outline is created as a structure for writing an essay, it makes sense to organize your thinking, research, and structure before jumping into the code. When the time comes to build the database and the front-end interaction, the domain model will be used as your reference.
If this step is skipped, a lot of time will go toward writing and rewriting code. All high-level details should be figured out before you write a single line of code. This organization up front allows you to focus on how to execute the ideas and build out the functionality.
Questions to ask yourself
- What models do I need to have in order to store correct and complete data for my features?
- How am I going to use and access this data?
- What are the relationships between each data table?
3. Wireframe
Utilizing the information outlined in Steps 1 and 2, a wireframe should be developed to lay out the user interface. Building this skeleton provides a blueprint for how each feature comes to life on the page — where it』s placed, how the data shows up to the user, and what the interaction will be. Typically, a wireframe will be built for each page view within your app. For example, Instagram has a main feed, a profile page, and a notifications page. Each of those views was carefully planned out with a focus on user interaction.Visualizing how your app will come to life is essential. If you build something without a plan and find it doesn』t work, you have to scrap it and start over. The blueprint phase allows you to work out any problems before they arise and figure out exactly what you want to display. Some great wireframing tools I have used are Figma, AWW App, and Axure.
If this step is skipped, there is no reference to what you are building. If you were to design the UI as you go, a lot of energy would be spent adjusting elements on the page, using up time rebuilding code every time you find something doesn』t look right. It is also not the best practice. If you begin without a solid plan, it will show in your final product.
Questions to ask yourself
- Where do I want my features to show up in the app?
- How do I want users to interact with these features?
- What data am I accessing to display within each section of the app?
4. Consider Edge Cases
Before starting to build your app, it』s a good idea to think through what could possibly go wrong. A concern in programming is that a user could misuse your app or misunderstand the true intention of a feature, so it』s good to consider the outcomes and plan how to prevent your app from breaking down.For example, do you have a login page? On that login page, what information are you asking the user for? What validations can you add to the model to ensure the information they input is correct and complete? What is your definition of 「correct and complete」?
If this step is skipped, there is a risk that your app will be built in a way that can be easily broken. Edge cases will present themselves as you go along too, so you can』t necessarily plan for every possible problem, but anticipating what could go wrong will prepare you to figure out solutions quicker.
Questions to ask yourself
- How can I clearly direct users into a certain pattern through the app, keeping interactions meaningful and purposeful?
- How could a user 「break」 the app? In other words, what would it mean to use the app incorrectly?
- How can I prevent a user from breaking the app?
5. Create Milestones
One final step in the pre-work phase is creating a timeline. Having a detailed timeline helps to set expectations and estimate how long each feature will take to build. It』s almost impossible to know the exact timing, but working toward a goal sets an intention and helps to keep things on track.Another benefit of establishing a timeline is breaking a large, complicated application structure into smaller, manageable pieces. This process forces you to think about the order in which elements are built, which will make your approach more intentional when building out the functionality. For example, it makes the most sense to build out the database before building the front-end. Referring to Instagram again, having access to the user data is important before you can establish the follower interaction. If you do not build a proper database first, you will not be able to correctly build that feature.
If this step is skipped, it can add a significant amount of stress, frustration, and time to the project. When looking at the full deliverable, it feels daunting. Breaking this down into manageable pieces not only helps maintain stress levels but allows you to compartmentalize each piece into building blocks that will integrate to form the finished product.
Questions to ask yourself
- How can I break down all the to-dos into small, executable pieces?
- In what order does it make sense to build each feature? Does one feature rely on another in order to work?
- What is my target launch date? What is realistically feasible to complete in that timeframe?
Conclusion
Following the five steps detailed above is critical in establishing an organized, efficient workflow before jumping into the build. Coding is tedious and complicated. Taking the time to plan ahead will save time and resources later in the process and eliminate the added stress of feeling scattered or unprepared.Set yourself up for success and take these necessary steps for the best possible execution of your application.
下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/
