CRUD Application Using ReactJS Hooks M, Kanniga Parameshwari; K, Selvi; M, Rekha ...
EAI endorsed transactions on internet of things,
03/2024, Letnik:
10
Journal Article
Recenzirano
Odprti dostop
This Project is aimed to implement CRUD operations using the library called React.js which is the advanced version of the language Javascript. The question which pops out everyone’s mind now is why ...React? There’s lot of open – source framework/ library/ language that is available in today’s internet. The purpose of using react is anyone with the little knowledge of javascript can easily learn react and implementation of this library is user-friendly. Also, there’s many more packages react can easily get installed in NPM and run the application whatever changes in the code can do. React also delivers good UI for the developer and to create/develop new apps for future generation. There are more than 2000 developers and over one lakh sites making use of react.js among some of the most powerful are Instagram, Netflix, Whatsapp, Uber. It also integrates with any other javascript libraries or framework and speciality of react can make changes in the web browser without doing subsequent refresh of the pages. React can allow the developer to build any complex web application and more importantly mobile application. The CRUD is an acronym for Create, Read, Update and Delete which is very much essential for implementing any strong application with relational Database. Thus, the project results in Creating the user/users with their details, read the users task, updating if any new user is created through ‘Create’ operation, and finally delete the user/users list if not wanted for an application. Though the ‘crud’ functions for creating an application can be done in any language, the author specifically uses Javascript library called react.js which is one of the best platforms to create the single page user application interfaces. The overarching goal of this application is to bring easiness for any product development company in need of crud-user functions can stick to this.
Universitas Ahmad Dahlan (UAD) merupakan salah satu universitas swasta yang terletak di Daerah Istimewa Yogyakarta. Perlembangan UAD tergolong sangat cepat dalam berbagai bidang, baik dari bidang ...akademik maupun non akademik. UAD memiliki website sistem informasi yang sangat baik, salah satunya adalah website Organisasi Mahasiswa (ORMAWA)dengan alamat https://uad.ac.id/id/ormawa/yang dapat diakses oleh mahasiswa dosen maupun pengguna umum. Website ini memiliki fungsi sebagai pengenalan Ormawa ataupun sebagai sumber informasi tekait kegiatan Ormawa UAD. Masalah yang muncul pada website tersebut saat ini adalah mahasiswa kurang mengetahui halaman website tersebut karena Ormawa lebih sering menggunakan sosial media seperti Instagram dalam menyampaikan informasi. Namun masalah lain yang muncul adalah mahasiswa atau pengguna umum diharuskan mengikuti akun Ormawa terkait untuk mendapatkan informasi terbaru,sedangkan Ormawa UAD jumlahnya cukup banyak sehingga kurang efisien dalam penggunaan. Maka dilakukan penelitian untuk membangun kembali sosial media khusus untuk Ormawa UAD dengan tujuan memusatkan informasi pada satu halaman website sehingga mahasiswa tidak harus mengikuti seluruh akun Ormawa dan mempermudah penyampaian informasi bagi mahasiswa atau pengguna umum. Berdasarkan permasalahan tersebut, maka dikembangkan website Media Sosial Organisasi Mahasiswa Universitas Ahmad Dahlan dengan menggunakan arsitektur sistem web Single Page Application (SPA). Adapun tahapan penelitian meliputi kebutuhan fungsional, perancangan basis data dan mockup, implementasi basis data dan pengkodean serta pengujian dengan System Usability Scale (SUS) sebagai pengujian kelayakan website berdasarkan kisaran rating penerimaan, Single Ease Question (SEQ) sebagai pengujian yang mengukur kemudahan bagi pengguna dan pengujian website dengan ekstensi Lighthouse dari Google Chrome berdasarkan dengan aspek-aspek yaitu performance, accessibility dan best practices. Hasil yang diperoleh dari perhitungan 32 data survei System Usability Scale (SUS) didapatkan niali rata-rata 70,16 dengan nilai C dan masuk kategori Good (Baik) berdasarjan rating penerimaan, kemudian pengujian Single Ease Question (SEQ) dengan survei 10 orang pengguna didapatkan hasil median rata-rata 5,8 dengan kategori cukup mudah, lalu pengujian website dengan ekstensi Lighthouse dari Google Chrome menghasilkan nilai Performance 50, Accessibility 80, Best Practices 86, SEO 80 dan terdapat Progressive Web Application dimana nilai tersebut lebih baik daripada website biasa tanpa arsitektur Single Page Application untuk meningkatkan user experience.
The paper contains comparison between Angular and BackboneJS frameworks. For research purposes, two single page applications were created. Both providing the same functionalities. In this article ...such elements were examined and compared: time of loading elements, number lines of code, size of compiled application. community gathered around frameworks and time needed to create the application using frameworks. The obtained results did not indicate a solution that was clearly better to be used in single page applications.
Web systems have existed for a long time and quite a lot of them have been created. Modern development uses new microservice architectural to improve performance, portability, and other important ...characteristics. This necessitates the transformation of legacy systems from a monolithic architecture to a microservices one. Such a process is complex and costly, so improving the methods for converting old systems to a new platform is relevant. This research aims to develop a method of applying microfrontends approach for monolithic single page applications (SPA). The article proposes a method of transforming the software system architecture from monolithic to microservice architecture (MSA). Since the client part of the system is considered, the term microfrontend is proposed, as an analog of microservers in the server part of the software systems. A brief review of existing architecture reengineering research is made and the advantages of a microservice approach are identified. The proposed three-stage method differs from the methods by the selection of an additional stage of conversion, which allows to gently change the connections between parts of the monolithic application, which were implemented in the initial monolithic architecture. The first stage is reverse engineering, it is proposed to shift the focus from the search for outdated code to the functional analysis of the program as such. The second stage, a transition to a modular architecture with the allocation of functionality into separate modules is proposed. At the end of the third stage, we have several separate programs (microinterfaces) that are connected to the main program. An experiment with a typical external SPA demonstrates the operation of the proposed algorithm. The system obtained as a result of the transformation is compared with the original one according to the following measurable parameters: production builds building time, size of the main bundle, and first page average load time. All comparisons showed the advantages of the system obtained as a result of the conversion. As a result, the architecture transformation algorithm allows you to obtain a guaranteed better result, taking into account the limitations of the interface SPA, which were not considered by the authors of previous articles.
Testy automatyczne mają na celu weryfikowanie funkcjonalności systemu na poziomie interfejsu użytkownika końcowego. W artykule porównane zostały narzędzia Selenium WebDriver oraz Protractor. Do ...przeprowadzenia analizy porównawczej narzędzi ustalono pięć kryteriów porównawczych na podstawie, których przeprowadzony został proces analitycznej hierarchizacji. Na podstawie otrzymanych obliczeń zostały wyciągnięte wnioski dotyczące tego, która platforma jest lepszym wyborem pod względem testowania aplikacji Single Page Application
Tematem artykułu jest analiza porównawcza jednych z aktualnie najpopularniejszych frameworków języka JavaScript, służących do budowania aplikacji typu Single Page Application. Podczas analizy ...przyjęto cztery kryteria porównawcze: trudność nauki biblioteki, dodatkowe narzędzia charakterystyczne dla danego frameworka, wydajność na urządzeniach stacjonarnych oraz wydajność na urządzeniach mobilnych.
Recent years have seen the rise of a new generation of UI frameworks for web application development. These frameworks differ from previous generations of JavaScript frameworks in that they define a ...declarative application development model, where transitions in the state of the UI are managed by the framework. This potentially greatly simplifies application development, but requires the framework to implement a rendering strategy which translates changes in application state into changes in the state of the UI. The performance characteristics of these rendering strategies have thus far been poorly studied.
In this article, we describe the rendering strategies used in the frameworks Angular, React, Vue, Svelte and Blazor, which represent some of the most influential and widely used modern web frameworks. We find significant differences in the scaling of costs in their rendering strategies with potentially equally significant practical performance implications. To verify these differences, we implement a number of benchmarks that measure the scaling of rendering costs as an application grows in complexity.
The results of our benchmarks confirm that under certain circumstances, performance differences between frameworks can range up to several orders of magnitude when performing the same tasks. Furthermore, we find that the relative performance of a rendering strategy can be effectively estimated based on factors affecting the input sizes of render loops. The best performing rendering strategies are found to be ones which minimize input sizes using techniques such as compile-time optimization and reactive programming models.
The exponential growth of Small Medium Enterprises (SMEs) in Indonesia has led to the greater competition among them. However, their business processes are often inefficiently managed, which increase ...the cost of operation. The current Enterprise Resource Planning system could address the problem, but the price is relatively expensive for current condition of SME in Indonesia. The problem continues when the business operation run in different places, where data inconsistencies reduce operation efficiency. Cloud-based ERP is a possible solution, but it is relatively slow to fully maximize the benefit. Therefore, new affordable solution with remote access, which use less internet bandwidth is needed to answer problems in implementing ERP. This study aims to analyze the problem and use the findings to provide a prototype that could address the existing problem. Through implementation of various technologies such as Single Page Application, Gzip Compression, and Webpack Module Bundler, the author successfully developed the prototype of ERP system. Several tests, including compatibility test and user acceptance test were performed to evaluate the prototype. Although this prototype has not been able cover the whole modules, the test results showed a satisfactory result in terms of accessibility and basic functionality.
One-Page Multimedia Interactive Map Maiellaro, Nicola; Varasano, Antonietta
ISPRS international journal of geo-information,
01/2017, Letnik:
6, Številka:
2
Journal Article
Recenzirano
Odprti dostop
The relevance of local knowledge in cultural heritage is by now acknowledged. It helps to determine many community-based projects by identifying the material to be digitally maintained in multimedia ...collections provided by communities of volunteers, rather than for-profit businesses or government entities. Considering that the search and browsing of texts, images, video, and 3D models related to places is more essential than using a simple text-based search, an interactive multimedia map was implemented in this study. The map, which is loaded on a single HyperText Markup Language (HTML) page using AJAX (Asynchronous JavaScript and XML), with a client-side control mechanism utilising jQuery components that are both freely available and ad-hoc developed, is updated according to user interaction. To simplify the publication of geo-referenced information, the application stores all the data in a Geographic JavaScript Object Notation (GeoJSON) file rather than in a database. The multimedia contents—associated with the selected Points of Interest (PoIs)—can be selected through text search and list browsing as well as by viewing their previews one by one in a sequence all together in a scrolling window (respectively: “Table”, “Folder”, and “Tile” functions). PoIs—visualised on the map with multi-shape markers using a set of unambiguous colours—can be filtered through their categories and types, accessibility status and timeline, thus improving the system usability. The map functions are illustrated using data collected in a Comenius project. Notes on the application software and architecture are also presented in this paper.
The information technologies help solve the most difficult problems, qualitatively change the provided educational services and create conditions for comfortable living and development for each ...inhabitant in particular, and the city’s community as a whole. In the context of the implementation of these projects, the procedures for the selection and acquisition of a profession are important, taking into account the personal characteristics of applicants and the needs of the city’s community. The decision-making process for choosing a future specialty starts even while studying at school, and is actualized during the selection of external independent evaluation subjects. Another important step in this chain is the choice of an educational institution for further education and specialization. The paper proposes an information technology of personalized choice of profession in accordance with the needs of a person and the requirements of the labor market in a smart city, which is presented in the form of five consecutive functional stages: determination of professional inclinations and abilities; monitoring of the urban labor market; a choice of the future profession; a choice of educational institution; formation of an individual learning trajectory. The models and methods of information technology support of personalized choice of a profession are described, in particular: model of data analysis for determination of professional inclinations and abilities of a person on the basis of the results of vocational guidance tests have been developed, which made it possible to optimize the process of determining the professional peculiarities of a person; the methods of monitoring the labor market of the city; using the methodology of constructing data hypercube, the method of analysis of educational activity in educational institutions in the city acquires the further development. The main characteristics of the developed one-page information technology web application are presented which combines all stages of training specialists in a holistic system taking into account the needs of a person and the requirements of the labor market in a large city.
PDF
