Over the last number of years concerns over the safe use of social media applications have featured our news feed in waves. Most recently, the ban of China’s TikTok and WeChat by the US government comes to mind, along with Facebook who have receive public scrutiny by governments and the public alike for its wrongful handling of private user data.
在过去的几年中，对安全使用社交媒体应用程序的关注使我们的新闻提要一浪高过一浪。 最近，美国政府对中国的TikTok和微信的禁令浮出水面，Facebook也因不当处理私人用户数据而受到政府和公众的公开审查。
So I decided to build my own social media application:
因此，我决定构建自己的社交媒体应用程序：
SHARE is a is a full-featured cross-over between Twitter, Snapchat and Instagram, but with its own look & feel, and ready to be deployed by any person, company or organisation on their own private servers.
SHARE是Twitter，Snapchat和Instagram之间的功能齐全的跨平台，但具有自己的外观和感觉，并可以由任何个人，公司或组织在自己的专用服务器上进行部署。
The realisation of this application took me on a journey through the unexplored, and this article I will talk in more detail about some of the most important decisions that helped make this application a reality.
该应用程序的实现使我踏上了未经探索的旅程，在本文中，我将详细介绍一些有助于使该应用程序成为现实的最重要的决策。
Want to check out the app? Share is now live and available to test and purchase through this link.
是否想签出该应用程序？ Share现在处于活动状态，可以通过此链接进行测试和购买。
选择合适的技术堆栈 (Selecting the right tech stack)
SHARE consists of a React Native supported mobile app that is connected to a NodeJS api server application. Selecting this technology stack was no overnight decision. Let me explain…
SHARE由连接到NodeJS api服务器应用程序的受React Native支持的移动应用程序组成。 选择这种技术栈并不是一朝一夕的决定。 让我解释…
I was not always a React Native developer. Previously, I worked at a company developing custom Xamarin mobile applications for local businesses. During that period we sometimes discussed React Native between co-workers, which often lead to off-hand remarks, like:
我并不总是一个React Native开发人员。 在此之前，我曾在一家为本地企业开发自定义Xamarin移动应用程序的公司工作。 在此期间，我们有时会在同事之间讨论React Native，这常常导致一些不合时宜的言论，例如：
“Our applications need to function offline. I don’t believe it can be done with React Native.” → It can be done
“我们的应用程序需要脱机运行。 我不相信使用React Native可以做到。” → 可以做到
“We offer local notification. Is it possible with React Native?” → It is possible
“我们提供本地通知。 React Native可能吗？” → 有可能
“We separate data view models from view render logic. Is that even possible with React Native?” → Keep reading!
“我们将数据视图模型与视图渲染逻辑分开。 使用React Native甚至有可能吗？” → 继续阅读！
Meanwhile, our company had one guy developing our apps’s .Net core features, another guy writing the Android app and a third guy writing the iOS application. On top of that, Xamarin (non-XAML) still lacks hot-reloading capabilities and its documentation is dreadful.
同时，我们公司有一个人在开发我们应用程序的.Net核心功能，另一个人在编写Android应用程序，另一个人在编写iOS应用程序。 最重要的是，Xamarin(非XAML)仍然缺乏热重装功能，其文档令人恐惧。
There must be better ways to develop applications, is what I kept thinking . And so, being already familiar with React, I gave React Native a go.
我一直在想， 必须有更好的方法来开发应用程序 。 因此，已经熟悉React的我就去了React Native。
Working on SHARE brought back the fun of developing mobile applications. But what’s perhaps more interesting, using the
在SHARE上的工作带回了开发移动应用程序的乐趣。 但是，使用
MongoDB — Express — React-Native — NodeJS
MongoDB — Express — React-Native — NodeJS
tech stack turned what used to be a three-man job into a one-man job.
科技堆栈将过去的三人工作变成了单人工作。
首先完成前端，然后构建后端 (Complete the frontend first, then build out the backend)
Dipping your toes into full stack development for the first time, it is tempting to dive right into writing the frontend and backend code, all at the same time. You want to see those features that look beautiful on paper turned into reality.
第一次将您的脚趾浸入全栈开发中，很诱人地直接投入编写前端和后端代码的全部时间。 您想看到那些看起来很漂亮的功能变成现实。
I will argue this is a bad idea.
我会认为这是一个坏主意。
For me, the fun of developing is about creating beautiful screens, views and elements. It is about seeing the fruits of your labour and watching your app become reality.
对我来说，开发的乐趣在于创建漂亮的屏幕，视图和元素。 它是关于看到您的劳动成果并看着您的应用程序变为现实。
Each new screen boosts the believe that your app will soon become a reality.
每个新屏幕都使人相信您的应用将很快成为现实。
Spending too much time thinking of backend solutions for backend problems therefore does not help to make that important initial progress. What it does do is distract from creating a prototype application that can be leveraged to:
因此，花太多时间思考后端问题的后端解决方案无助于取得如此重要的初步进展。 它所做的只是分散了创建原型应用程序的精力，该应用程序可用于：
- Create a pool of beta testers to test your UI, features and collect feedback. 创建一个Beta测试人员池，以测试您的UI，功能并收集反馈。
- Initiate promotional efforts and bring together a community of potential buyers that you can turn to for your first sales once your final app is complete. 启动促销活动，并召集潜在的买家社区，一旦您的最终应用程序完成，您就可以寻求首次销售。
- And perhaps most importantly, to focus on as few tasks as possible, which will dramatically improve the quality of your application and save you a lot of time and painful experiences later on. 也许最重要的是，集中精力于尽可能少的任务，这将大大提高应用程序的质量，并为您节省大量时间和以后的痛苦经历。
So if this means you need to create a bunch of dummy data to help you complete your frontend app more quickly, then that is what you should do.
因此，如果这意味着您需要创建一堆虚拟数据来帮助您更快地完成前端应用程序，那么您应该这样做。
In my case, once I finished the frontend application, I put it up for sale as a UI starter kit while I continued work on the backend app.
就我而言，一旦完成了前端应用程序，我便将其作为UI入门套件出售，而我继续开发后端应用程序。
将显示与数据分开 (Separating displays from data)
Storing and transforming data and handling data calls in the SHARE mobile app is handled by Redux and Redux-Saga.
Redux和Redux-Saga负责在SHARE移动应用中存储和转换数据以及处理数据调用。
An often heard complaint about using Redux for storing data is the amount of boilerplate code that accompanies this type of setup.
关于使用Redux来存储数据的一个经常听到的抱怨是这种类型的设置附带的样板代码数量。
In my view, what some see as boilerplate code could (and should) be considered as a useful way to distinguish between the app’s view layers on the one hand and its business logic (transferring, modifying and storing data) on the other.
在我看来，可以(并且应该)将某些被视为样板代码的代码视为一种有用的方式，以区分应用程序的视图层和另一方面的业务逻辑(传输，修改和存储数据)。
This structure, which is also referred to as Model-View-ViewModel (MVVM), is an accepted software architectural pattern by which data can be managed in a way independent from an application’s display logic.
这种结构，也称为Model-View-ViewModel (MVVM)，是一种公认的软件体系结构模式，通过该模式可以独立于应用程序的显示逻辑来管理数据。
Each of the actions files, reducer files and saga files that support the Redux store are a great way to implement MVVM. Setting up this type of file structure helps achieve two important things:
支持Redux存储的每个action文件， reduce文件和saga文件都是实现MVVM的好方法。 设置这种类型的文件结构有助于实现以下两项重要任务：
- Files are set up to focus on one important thing only. For example, a file with code to render a particular view will only contain references that impact how that particular view is rendered. 设置文件仅专注于一件重要的事情。 例如，带有代码以呈现特定视图的文件将仅包含影响该特定视图呈现方式的引用。
- An experienced developer opening any file in the application will know from the get-go what the purpose of that particular file is. This makes the application very manageable. 有经验的开发人员在应用程序中打开任何文件都会从一开始就知道该特定文件的用途。 这使应用程序非常易于管理。
构建后端代码 (Structuring backend code)
Maintaining consistency in naming conventions is key in creating an easy to understand backend app that is easy to debug.
保持命名约定的一致性是创建易于调试的易于理解的后端应用程序的关键。
Consistency in the SHARE api server application contains a two-layered approach:
SHARE api服务器应用程序中的一致性包含两层方法：
All Models, Controllers and helper functions are referenced by the exact same names.
所有Model ， Controllers和helper函数均使用完全相同的名称引用。
- All ‘get’, ‘build’, ‘find’, and ‘delete’ functions are async and follow the same pattern. 所有的“获取”，“构建”，“查找”和“删除”功能都是异步的，并遵循相同的模式。
The backend file structure almost exactly resembles how data models are set up on the frontend side.
后端文件结构几乎完全类似于在前端侧设置数据模型的方式。
What’s more, all Mongoose calls throughout the backend app are await-able. The general idea here is to avoid awfully long waterfall callback functions that seem to never end and are a pain to debug.
此外，整个后端应用程序中的所有Mongoose呼叫都可以等待。 这里的总体思路是避免冗长的瀑布回调函数，这些函数似乎永远不会结束，并且调试起来很麻烦。
An interesting article that I took inspiration from, lays out the benefits of transitioning from callbacks to async-await functions. Following this logic, all api request can now be traced following one simple model:
我从中得到启发的一篇有趣的文章阐述了从回调过渡到异步等待功能的好处。 按照这种逻辑，现在可以按照一个简单的模型跟踪所有api请求：
MobileApp API Call → Router → Controller → Service Helper (get/build/find/deleteFromRequest(req)) → Controller → MobileApp
MobileApp API调用→路由器→控制器→服务助手(get / build / find / deleteFromRequest(req))→控制器→MobileApp
With this model in mind, modifying and debugging the backend app has become a mostly painless experience.
考虑到此模型，修改和调试后端应用程序已成为一种无痛的体验。
着眼于听众发展 (Develop with your audience in mind)
Having zoomed in on the technical implementation of the SHARE app might raise the concern that the app may not be for non-developers. Nothing would be further from the truth.
放大SHARE应用程序的技术实施后，可能会引起关注，即该应用程序可能不适用于非开发人员。 事实与事实没有什么不同。
Anybody who can follow along with a clear set of step-by-step instructions will be able to install and deploy this application.
任何可以遵循明确的分步说明的人都将能够安装和部署此应用程序。
For non programmers I created an app that is easy to customise, and includes customisation options, such as:
对于非程序员，我创建了一个易于定制的应用程序，其中包含定制选项，例如：
- fonts, colors and style features 字体，颜色和样式特征
- animation types 动画类型
- screen names 屏幕名称
- simple enabling or disabling of numerous app functionalities 简单启用或禁用多种应用程序功能
For beginning programmers, I created an app that is full of code examples and best practices to learn any of the following:
对于初学者，我创建了一个应用，其中包含许多代码示例和最佳实践，以学习以下任何内容：
- How to create flexible, reusable, custom components with React Hooks and React Native. 如何使用React Hooks和React Native创建灵活，可重用的自定义组件。
- How to implement simple animations with React Native’s Animated component. 如何使用React Native的Animated组件实现简单的动画。
- How to apply Redux for state management. 如何将Redux应用于状态管理。
- How to avoid unwanted side effects that come with making simultaneous api calls. 如何避免同时进行api调用带来的不良副作用。
- How to structure a MongoDB supported backend application that is performant and easy to manage. 如何构建高性能且易于管理的受MongoDB支持的后端应用程序。
- How to create a secure authentication flow with NodeJS. 如何使用NodeJS创建安全的身份验证流程。
- How to upload, store and display images and videos with NodeJS and third-party image storage. 如何使用NodeJS和第三方图像存储上载，存储和显示图像和视频。
- and lots more. 还有更多。
For advanced programmers, I created an app containing code with a clear and simple structure, that is easily understood, and simple to modify or extend with additional features.
对于高级程序员，我创建了一个包含清晰，简单结构的代码的应用程序，该结构易于理解，并且易于修改或扩展其他功能。
In the end, it is up to you to decide if this app is right for you. I had fun and learned some useful new skills developing this application, which for me is (nearly) as important as selling you on this app.
最后，由您决定此应用程序是否适合您。 我玩得很开心，并学到了一些开发此应用程序的有用的新技能，对我来说，这与在此应用程序上卖给您一样重要。
And if you do decide to purchase SHARE, I would happily assist you with any issues you might face in the process of installing, deploying and testing your application.
而且，如果您决定购买SHARE，我们将很高兴为您解决在安装，部署和测试应用程序过程中可能遇到的任何问题。
And last but not least, do remember to give my app a try! Thanks for reading!
最后但并非最不重要的一点是，请记住尝试一下我的应用程序 ！ 谢谢阅读！
普通英语JavaScript (JavaScript In Plain English)
Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!
喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！
1840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
