M7011E

The project for M7011E 2022 by the group gamla och bittra; with Elliot Huber, Magnus Stenfelt, Peter Panduro and Tovah Parnes. Our porject is a blog style website where we will make it using the frameworks NextJS and Dart and then compare the performance of the two different systems. They will have a shared backend and database so we can see the difference in them without other factors.

We decided in the latter part of the project to focus on the development of nextjs and not flutter. Therefore flutter is not using the backend solution but what we compared was a page without that factor. Nextjs is the solution that fullfills the requirements of the project. Flutter is a controlled comparison for evaluation

Setting up the project

1. Clone the repository
2. To setup the backend follow the README.md intructions found in the Backend folder
3. To setup the nextJS frontend navigate to Frontend/blog_next_frontend and follow the README.md instructions
4. To setup the flutter frontend navigate to Frontend/blog_flutter_frontend/my_app and follow the README.md instructions

Running the project

1. Start docker desktop
2. Navigate in a terminal to the backend folder and setup the docker containers using docker compose up -d --build --no-deps
   • Note, you may have to restart all containers except rabbitmq in order for the connections to set up properly
3. For manual testing of the api calls to the server open swagger ui by going to localhost:5001/docs in your browser
4. Navigate to the frontend folder of your choice(next or flutter)
5. Start the project
   • To run the next frontend type yarn run dev into the terminal and in the browser open localhost:3000
   • To run the flutter frontend type flutter run -d chrome --web-port=3000 or run it from your editor

Testing frameworks

As seen in the tables below the Flutter implementation is slower to reaload the page. This is because it loads the entire application immedietly compared to next that only loads the page. This can be seen when switching to the about page from the home page. Flutter has an immediate transition. The drawback in this is that the total size of the load is very big especially when the user only want one page. Signing in has for the both practically very little differences

Part of our performance report is also a more subjective opinion on how they are to work with. We are of the opinion that for this course and generally making a web native project nextjs is the best choice. Flutter is probably a better choice if we were creating an app that we want a web solution to aswell. Flutter has less resources and little documentation for web development compared with nextjs. But way more for apps.