移动web优先使用内核_通过移动优先方法充分利用Web应用程序的动机，从而摆脱了...-CSDN博客

移动web优先使用内核

Recent media consumption & trends reveal that 90% of their mobile time is spent in apps, and only 10% browsing the rest of the internet. But the user base of a specific product may be reluctant to move for a mobile app, only to get done a specific service. And also the user may think twice before installing a new app because of limited storage and memory. Most hesitated warning at this point is that to free up the space. So web apps may be the newest trend in the upcoming future, with the tagline “no more mobile apps”.

最近的媒体消费和趋势表明，他们90％的移动时间都花在了应用程序上，而只有10％的时间用于浏览互联网的其余部分。但是，特定产品的用户群可能不愿意迁移到移动应用程序，而只是为了完成特定服务。而且，由于存储和内存有限，用户在安装新应用之前可能会三思而后行。此时最犹豫的警告是释放空间。因此， 网络应用可能会成为未来的最新趋势，标语是“不再有移动应用”。

Its worthy to find out the importance of a mobile app during this walk-through.

在本演练中，有必要了解移动应用程序的重要性。

为什么我们需要移动应用程序？ (Why do we need mobile apps?)

High market-share and the usage
高市场占有率和用途
Ease of sending notifications
易于发送通知
Ability to work offline
离线工作能力
Making use of mobile device features
利用移动设备功能
Mobile apps offer better Personalization
移动应用程序提供更好的个性化

具体用例 (Specific use case)

Imagine a situation where the Product owner decides to go for a mobile app based on the following reasons.

设想一下产品所有者基于以下原因决定使用移动应用程序的情况。

Web app takes a considerable amount of time to fulfill a specific operation.
Web应用程序需要花费大量时间才能完成特定操作。
All the features which are available in the current web app is not accessible via mobiles, so that need for a mobile app has been arise with limited functionality.
当前的Web应用程序中可用的所有功能都无法通过移动设备访问，因此对移动应用程序的需求已经出现，而功能却受到限制。

Improving the performance is a continuous process. Product needs to be optimized in every aspect in order to achieve it. And at the same time what if we were able to provide an all in one web application with all the services that works perfectly on both mobile and desktop browsers? Since a web browser is available in every mobile its a great option to get away with a mobile app.

提高性能是一个连续的过程。为了实现它，需要在各个方面对产品进行优化。同时，如果我们能够在一个移动应用程序和台式机浏览器上完美运行的所有服务中提供一个Web应用程序，那该怎么办？由于每个移动设备都可以使用网络浏览器，因此它是摆脱移动应用程序的理想选择。

突然出现需求时可能面临的挑战 (Challenges that are likely to face when a sudden requirement arises)

Lack of well trained programmers who can deal with mobile technologies
缺乏训练有素的能够处理移动技术的程序员
have to deal with Different platforms
必须处理不同的平台
Tight deadline
紧迫的截止日期
Choosing the Right front end framework
选择合适的前端框架
Fitting between the front-end and back-end services, technologies
介于前端和后端服务，技术之间

设计方案 (Solution with the design)

How can you redesign your web application to avoid going for a mobile application? It’s the the responsiveness of the user interfaces plays a huge role in achieving this. An experienced designer with great ideas can help with an innovative design. Its worthy to wait until the design gets finalized.

您如何重新设计Web应用程序以避免使用移动应用程序？用户界面的响应能力在实现这一目标方面发挥着巨大作用。经验丰富的设计师具有出色的创意可以帮助您进行创新设计。值得等待设计最终确定。

表格布局的见解 (An insight with table layouts)

One of the major concern that i had to deal with was, how can we make accessible the table views on a mobile with all the options available? I hope this would be a great starting point when redefining the your app for mobiles.

我要处理的主要问题之一是，如何使具有所有可用选项的移动设备上的表格视图可用？我希望这将是重新定义手机应用程序的一个很好的起点。

Here are some illustrations which will be helpful when understanding this.

以下是一些插图，有助于您理解。

常规表布局 (Conventional table layout)

Image for post — Typical table view which is harder to maintain the responsiveness

优点 (Pros)

User can get a summarized view
用户可以获得摘要视图

缺点 (Cons)

Limited scalability
扩展性有限
Less adaptable for changing requirements
适应需求变化的适应性较差
Adding new columns will increase the width of the table and even in desktop browsers horizontal scroller will gets enabled
添加新列将增加表格的宽度，甚至在桌面浏览器中也将启用水平滚动条

如何重新定义布局？ (How to redefine the layout?)

Adhere to mobile first design and development approach. Always think about how does your custom component going to be display on a mobile device. So that all the functionalities that are available within a web app can be made available for a mobile app too. Isn’t that amazing? Note that this is the target of this piece of writing too.

坚持移动优先的设计和开发方法。始终考虑如何将自定义组件显示在移动设备上。这样，Web应用程序中可用的所有功能也可以用于移动应用程序。那不是很神奇吗？请注意，这也是本文的目标。

重新定义的桌面视图 (Redefined desktop view)

Component view with a card layout is a better solution which can be adjusted based on the width of the screen. The combination of CSS grid for two-dimensional layout and flex-box for layout in one dimension, makes a responsive layout for target devices. If more control is needed, CSS media queries provides a better control over it.

带有卡布局的组件视图是一种更好的解决方案，可以根据屏幕的宽度进行调整。二维布局CSS网格和一维布局的flex-box的结合，为目标设备提供了响应式布局。如果需要更多控制，则CSS媒体查询可以更好地控制它。

Instead of rendering the whole array of objects at once, pagination or load more content on scroll techniques makes the app loading faster. The app layout looks different based on the device width and in that way its possible to bring the accessibility to all the features for mobile devices as well.

分页或通过滚动技术加载更多内容而不是一次呈现整个对象数组，而是使应用程序加载更快。应用布局因设备宽度而异，因此可以为移动设备提供对所有功能的可访问性。

重新定义的移动视图 (Redefined mobile view)

Each record in the table is a new card with all its details. Components are the future with latest front-end technologies. So that i think card view provides them a better layout.

表中的每个记录都是一张包含其所有详细信息的新卡。组件是最新前端技术的未来。因此，我认为卡片视图为他们提供了更好的布局。

It ensures:

它确保：

the accessibility (makes all the features available on every device)
可访问性(使每个设备上的所有功能都可用)
the scalability (fits well with the future requirements) of the app.
应用的可扩展性(非常适合将来的需求)。

结论 (Conclusion)

This is not to discourage you when there is a significant need for a mobile application at the moment. This is a motivation to design and implement mobile first web applications which gives a superb user experience and accessibility to your users in both desktop and mobiles.

当当前非常需要移动应用程序时，这并不是要阻止您。这是设计和实现移动优先Web应用程序的动机，该应用程序为台式机和移动设备中的用户提供了出色的用户体验和可访问性。

Thank you so much for hanging around.

非常感谢您的陪伴。