تفاوت SPA و MPA
Web applications are unwittingly replacing the old desktop applications. They are more convenient to use, they are easy to update, and they are not bound to one device. And even though users are gently moving from browser-based web applications into the mobile ones, the demand for complex and refined apps is already huge and is still growing. If you are thinking about creating your own application, you’ve probably heard that there are two main design patterns for web apps: multi-page application (MPA) and single-page application (SPA). And of course, both models have their pros and cons
برنامه های وب ناخواسته جایگزین برنامه های قدیمی دسک تاپ می شوند. استفاده از آنها راحت تر است ، به روزرسانی آنها آسان است و محدود به یک دستگاه نیستند. و حتی اگر کاربران به آرامی از برنامه های وب مبتنی بر مرورگر به داخل برنامه های تلفن همراه منتقل می شوند ، تقاضا برای برنامه های پیچیده و تصفیه شده در حال حاضر زیاد است و همچنان در حال رشد است. اگر به فکر ایجاد برنامه خود هستید ، احتمالاً شنیده اید که دو الگوی طراحی اصلی برای برنامه های وب وجود دارد: برنامه چند صفحه ای (MPA) و برنامه تک صفحه ای (SPA). و البته هر دو مدل موافقان و مخالفان خود را دارند.
Before you start turning your idea into the real application, you have to answer a bunch of important questions. To decide what app model is better for you, you should follow content-first approach, which emphasizes the importance of putting your application content before everything else. That’s because content is the main reason for which users will or won’t use the application. And this leads us to the most important questions: what content do you want to present and what content your users will care about the most.
قبل از اینکه ایده خود را به برنامه واقعی تبدیل کنید ، باید به چند سوال مهم پاسخ دهید. برای تصمیم گیری در مورد اینکه مدل برنامه برای شما بهتر چیست ، باید از روش اولین محتوا پیروی کنید که بر اهمیت قرار دادن محتوای برنامه شما قبل از هر چیز دیگری تأکید دارد. به این دلیل که محتوا دلیل اصلی استفاده کاربران از برنامه یا عدم استفاده از آن است. و این ما را به مهمترین سوالات سوق می دهد: شما می خواهید چه محتوایی را ارائه دهید و کاربران شما بیشتر به چه محتوایی اهمیت می دهند.
There are many pros and cons of SPA as well as of MPA. I hope that the lines below will clear the differences between these two design patterns and bring you closer to the point where you will know what kind of application fits your idea more. And make your idea about own application come true.
بسیاری از موافقان و مخالفان SPA و همچنین MPA وجود دارد. امیدوارم که خطوط زیر تفاوت این دو الگوی طراحی را پاک کرده و شما را به نقطه ای نزدیک کند که بدانید چه نوع کاربردی بیشتر با ایده شما سازگار است. و ایده خود را در مورد برنامه خود تحقق بخشید.
Single-Page Application
A single-page application is an app that works inside a browser and does not require page reloading during use. You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub.
برنامه تک صفحه ای برنامه ای است که در داخل مرورگر کار می کند و در هنگام استفاده نیازی به بارگیری مجدد صفحه ندارد. شما هر روز از این نوع برنامه ها استفاده می کنید. به عنوان مثال این موارد عبارتند از: Gmail ، Google Maps ، Facebook یا GitHub.
SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on.
SPA تمام تلاش خود را برای تهیه یک UX برجسته با تلاش برای تقلید از یک محیط "طبیعی" در مرورگر دارد بدون بارگیری مجدد صفحه ، بدون زمان انتظار اضافی. این فقط یک صفحه وب است که شما بازدید می کنید و سپس تمام محتوای دیگر را با استفاده از JavaScriptبارگذاری می کند - که به شدت به آنها بستگی دارد.
SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to the advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js .
Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy and workable fashion.
SPAنشانه گذاری و داده ها را به طور مستقل درخواست می کند و صفحات را مستقیماً در مرورگر ارائه می دهد. ما می توانیم این کار را به لطف چارچوب های پیشرفته جاوا اسکریپت مانند AngularJS ، Ember.js ، Meteor.js ، Knockout.jsانجام دهیم.
سایت های تک صفحه به کاربر کمک می کند تا در یک فضای وب راحت ، جایی که مطالب به صورت ساده ، آسان و قابل اجرا به کاربر ارائه می شود باشد.
Pros of the Single-Page Application:
جوانب مثبت برنامه تک صفحه:
· SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
SPAسریع است ، زیرا اکثر منابع (HTML + CSS + اسکریپت ها) فقط یک بار در طول عمر برنامه بارگیری می شوند. فقط داده ها به عقب و جلو منتقل می شوند.
· The development is simplified and streamlined. There is no need to write code to render pages on the server. It is much easier to get started because you can usually kick off development from a file file://URI, without using any server at all.
توسعه ساده و ساده است. برای ارائه صفحات در سرور نیازی به نوشتن کد نیست. شروع کار بسیار آسان تر است زیرا شما می توانید بدون استفاده از سرور از یک پرونده پرونده: // URIشروع به کار کنید.
· SPAs are easy to debug with Chrome, as you can monitor network operations, investigate page elements and data associated with it.
SPAبا Chromeاشکال زدایی آسان است ، زیرا می توانید عملیات شبکه را کنترل کنید ، عناصر صفحه و داده های مرتبط با آن را بررسی کنید.
· It’s easier to make a mobile application because the developer can reuse the same backend code for web application and native mobile application.
ساخت یک برنامه تلفن همراه آسان تر است زیرا توسعه دهنده می تواند از همان کد backend برای برنامه وب و برنامه تلفن همراه بومی استفاده مجدد کند.
· SPA can cache any local storage effectively. An application sends only one request, store all data, then it can use this data and works even offline.
SPAمی تواند هرگونه ذخیره محلی (cookie, local storge)را به طور موثر ذخیره کند. یک برنامه فقط یک درخواست ارسال می کند ، همه داده ها را ذخیره می کند ، سپس می تواند از این داده ها استفاده کند و حتی به صورت آفلاین کار می کند.
Cons of the Single-Page Application:
موارد منفی برنامه تک صفحه:
· It is very tricky and not an easy task to make SEO optimization of a Single-Page Application. Its content is loaded by AJAX (Asynchronous JavaScript and XML) — a method of exchanging data and updating in the application without refreshing the page.
In her comment, Iris Shaffer correctly pointed out that it can be done on server side as well. Indeed, it is easier today than it used to be.
انجام بهینه سازی SEO از یک برنامه تک صفحه ای بسیار مشکل است و کار ساده ای نیست. محتوای آن توسط AJAX(Asynchronous JavaScript و XML) بارگذاری می شود - روشی برای تبادل داده و به روزرسانی در برنامه بدون رفرش کردن صفحه.
در نظر خود ، آیریس شفر به درستی اشاره کرد که این کار از طرف سرور نیز قابل انجام است. در واقع ، امروز از گذشته آسان تر است.
· It is slow to download because heavy client frameworks are required to be loaded to the client
بارگیری آن کند است زیرا لازم است که چارچوب های مشتری سنگین بارگذاری شود
· It requires JavaScript to be present and enabled. If any user disables JavaScript in his or her browser, it won’t be possible to present application and its actions in a correct way.
In her comment, Iris Shaffer has noticed that with isomorphic rendering / server side rendering, you can render the page on the server already. When the initial render is on the server and can be cached, disabling JS would not be a concern for getting a rendered page. Theoretically, that’s right. Obviously you can render on server side. But lack of JS can be a concern for other functionalities. Lots of things can be done in HTML & CSS but from my experience it would be hell to do it this way instead of use JavaScript.
این به جاوا اسکریپت نیاز دارد تا فعال و فعال باشد. اگر هر کاربری JavaScript را در مرورگر خود غیرفعال کند ، ارائه برنامه و اقدامات آن به روشی صحیح امکان پذیر نیست.
در نظر خود ، Iris Shafferمتوجه شده است که با رندر ناهمسان / رندر سمت سرور ، می توانید صفحه را از قبل در سرور ارائه دهید. وقتی رندر اولیه روی سرور باشد و بتواند آن را پنهان کند ، غیرفعال کردن JSنگرانی برای دریافت یک صفحه رندر شده نخواهد بود. از لحاظ تئوریک ، درست است. بدیهی است که می توانید از سمت سرور رندر کنید. اما کمبود JS می تواند نگران کننده سایر ویژگی ها باشد. بسیاری از کارها را می توان در HTMLو CSSانجام داد ، اما از تجربه من انجام این کار به جای استفاده از JavaScriptبسیار سخت است.
· Compared to the “traditional” application, SPA is less secure. Due to Cross-Site Scripting (XSS), it enables attackers to inject client-side scripts into web application by other users.
در مقایسه با برنامه "سنتی" ، SPAاز امنیت کمتری برخوردار است. به دلیل Cross-Site Scripting (XSS) ، مهاجمان را قادر می سازد اسکریپت های سمت مشتری را توسط سایر کاربران به برنامه های وب تزریق کنند.
· Memory leak in JavaScript can even cause powerful system to slow down
نشت حافظه در JavaScript حتی می تواند باعث کند شدن سیستم قدرتمند شود
Multi-Page Application
برنامه ی چند صفحه ای
Multiple-page applications work in a “traditional” way. Every change eg. display the data or submit data back to server requests rendering a new page from the server in the browser. These applications are large, bigger than SPAs because they need to be. Due to the amount of content, these applications have many levels of UI. Luckily, it’s not a problem anymore. Thanks to AJAX, we don’t have to worry that big and complex applications have to transfer a lot of data between server and browser. That solution improves and it allows to refresh only particular parts of the application. On the other hand, it adds more complexity and it is more difficult to develop than a single-page application
برنامه های چند صفحه ای به روشی "سنتی" کار می کنند. هر تغییری به عنوان مثال. داده ها را نمایش دهید یا داده ها را به درخواست های سرور ارسال کنید و یک صفحه جدید از سرور در مرورگر ارائه دهید. این برنامه ها بزرگ هستند ، بزرگتر از SPA ها هستند زیرا لازم است. به دلیل مقدار محتوا ، این برنامه ها دارای سطح UI بسیاری هستند. خوشبختانه ، دیگر مشکلی نیست. با تشکر از AJAX ، دیگر نگران این نیستیم که برنامه های بزرگ و پیچیده مجبورند داده های زیادی را بین سرور و مرورگر منتقل کنند. این راه حل بهبود می یابد و به شما اجازه می دهد فقط قسمت های خاصی از برنامه را تازه کنید. از طرف دیگر ، پیچیدگی بیشتری می افزاید و توسعه آن دشوارتر از یک برنامه تک صفحه ای است.
Pros of the Multiple-Page Application:
جوانب مثبت برنامه چند صفحه ای
It’s the perfect approach for users who need a visual map of where to go in the application. Solid, few level menu navigation is an essential part of traditional Multi-Page Application.
این روش ایده آل برای کاربرانی است که نیاز به نقشه تصویری از محل کار دارند. ناوبری منوی سطح یکپارچه ، بخشی اساسی از برنامه سنتی چند صفحه ای است.
Very good and easy for proper SEO management. It gives better chances to rank for different keywords since an application can be optimized for one keyword per page.
بسیار خوب و آسان برای مدیریت صحیح سئو. از آنجا که یک برنامه کاربردی را می توان برای یک کلمه کلیدی در هر صفحه بهینه سازی کرد ، شانس بیشتری برای رتبه بندی برای کلمات کلیدی مختلف فراهم می کند.
Cons of the multiple-page application:
معایب برنامه چند صفجه ای
The development becomes quite complex. The developer needs to use frameworks for either client and server side. This results in the longer time of application development.
توسعه کاملاً پیچیده می شود. توسعه دهنده باید از چارچوب هایی برای سمت مشتری و سرور استفاده کند. این منجر به طولانی تر شدن زمان توسعه برنامه می شود.
SPA or MPA?
Before deploying a web application, you need to consider the goal of it. If you know you need multiple categories (because, for instance, you run an online shop or publish a lot of other content) — use a multi-page site. If you are sure that your site is appropriate for a pure single-page experience — go for it. And if you like SPA but can just barely fit everything into a single page, consider the hybrid site instead. This is another way I haven’t mentioned before. A hybrid application takes what is the best in both approaches and try to minimize the disadvantages.
قبل از استقرار یک برنامه وب ، باید هدف آن را در نظر بگیرید. اگر می دانید که به چندین دسته نیاز دارید (به عنوان مثال ، شما یک فروشگاه آنلاین راه اندازی می کنید یا بسیاری از مطالب دیگر را منتشر می کنید) - از یک سایت چند صفحه ای استفاده کنید. اگر مطمئن هستید سایت شما برای یک تجربه ناب یک صفحه ای مناسب است - به دنبال آن باشید. و اگر SPA را دوست دارید اما به سختی می توانید همه چیز را در یک صفحه قرار دهید ، به جای آن سایت ترکیبی را در نظر بگیرید. این روش دیگری است که قبلاً به آن اشاره نکردم. یک برنامه ترکیبی بهترین نتیجه را در هر دو روش می گیرد و سعی می کند معایب آن را به حداقل برساند.
Perhaps in the future, everyone will use Single Page Application model (including a hybrid app), as it seems to bring a lot of advantages. Many apps on the market are migrating towards this model. However, as some projects simply cannot fit into SPA, the MPA model is still vivid.
شاید در آینده ، همه از مدل Single Page Application (از جمله یک برنامه ترکیبی) استفاده کنند ، زیرا به نظر می رسد مزایای زیادی دارد. بسیاری از برنامه های موجود در بازار به سمت این مدل مهاجرت می کنند. با این حال ، از آنجا که برخی از پروژه ها به راحتی نمی توانند در SPA قرار بگیرند ، مدل MPA هنوز زنده است.
منبع : https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
