العمل مع WebAssembly وJava: تشغيل كود Java في المتصفح

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

```html

مقدمة: لماذا جافا في WebAssembly؟

WebAssembly (WASM) هو تنسيق تعليمات ثنائي منخفض المستوى، مصمم للتنفيذ في المتصفح بأداء قريب من الأداء الأصلي. ظلت جافا لفترة طويلة خارج هذا النظام البيئي بسبب جهازها الافتراضي (JVM). ومع ذلك، تتيح الأدوات الحديثة مثل TeaVM و CheerpJ إمكانية ترجمة كود جافا إلى WebAssembly، مما يفتح إمكانيات جديدة لتطوير الويب.

في هذه المقالة، سنقوم بتحليل كيفية عمل الربط بين جافا و WebAssembly، وسنستعرض أمثلة عملية ونقيم الأداء. ستتعلم كيفية نقل كود جافا الحالي إلى المتصفح دون إعادة كتابته بلغة JavaScript.

النهج الرئيسية لدمج جافا و WebAssembly

هناك طريقتان رئيسيتان لتشغيل كود جافا في WebAssembly:

ترجمة البايت كود إلى WASM — يتم استخدام TeaVM، الذي يقوم بترجمة Java bytecode إلى WebAssembly.
تشغيل JVM في المتصفح — يقوم CheerpJ بمحاكاة JVM في WebAssembly، مما يسمح بتشغيل تطبيقات جافا دون تعديل.

النهج الأول هو الأفضل للمشاريع الجديدة، لأنه يعطي حجم حزمة أصغر وأداء أفضل. النهج الثاني مناسب لنقل التطبيقات القديمة (legacy).

إعداد المشروع مع TeaVM

للبدء مع TeaVM، أضف التبعية في ملف pom.xml (Maven):

<dependency>    <groupId>org.teavm</groupId>    <artifactId>teavm-classlib</artifactId>    <version>0.9.0</version></dependency>

قم بإنشاء كلاس جافا بسيط للترجمة:

import org.teavm.jso.JSBody;import org.teavm.jso.JSExport;

public class Calculator {        @JSExport    public static int add(int a, int b) {        return a + b;    }        @JSExport    public static int factorial(int n) {        if (n <= 1) return 1;        return n * factorial(n - 1);    }}

التعليمة @JSExport تجعل الدوال متاحة من JavaScript. بعد الترجمة، ستحصل على وحدة WASM وملف تغليف JavaScript.

مثال عملي: الترجمة والاستدعاء من JavaScript

دعنا نستعرض الدورة الكاملة من الترجمة إلى الاستدعاء في المتصفح. أولاً، سنقوم بترجمة كود جافا باستخدام إضافة TeaVM:

<plugin>    <groupId>org.teavm</groupId>    <artifactId>teavm-maven-plugin</artifactId>    <version>0.9.0</version>    <configuration>        <targetType>WEBASSEMBLY</targetType>        <mainClass>com.example.Calculator</mainClass>    </configuration>    <executions>        <execution>            <goals>                <goal>compile</goal>            </goals>        </execution>    </executions></plugin>

بعد البناء (mvn package)، ستظهر الملفات في مجلد target: calculator.wasm و calculator.js. الآن، لنقم بإنشاء صفحة HTML:

<!DOCTYPE html><html><head>    <title>Java + WebAssembly Demo</title></head><body>    <h1>آلة حاسبة بلغة جافا في WASM</h1>    <p>النتيجة: <span id="result"></span></p>        <script src="calculator.js"></script>    <script>        // دالة الاستدعاء العكسي بعد تحميل WASM        teavmMain().then(function(api) {            var sum = api.com.example.Calculator.add(15, 27);            var fact = api.com.example.Calculator.factorial(5);            document.getElementById('result').innerHTML =                 '15 + 27 = ' + sum + '<br>' +                '5! = ' + fact;        });    </script></body></html>

افتح الصفحة

```