Кроссплатформенная разработка

Спецкурс для специальности "Информационные системы"

Димитров Вячеслав Михайлович, старший преподаватель кафедры ИМО, dimitrov@cs.petrsu.ru

Структура курса

  • Страница курса: http://kappa.cs.petrsu.ru/~dimitrov/cross/
  • 8 лекций
  • 5 лабораторных работ: 4 обязательных и одна на самостоятельное изучение (на + 1 балл на экзамене)
  • Экзамен

Лабораторные работы

Пункты со (*) для получения "Отлично" на экзамене.
  • Лабораторная работа 0: установка, знакомство, введение в платформу Node.js.
  • Лабораторная работа 1: nodejs клиент-серверное приложение.
  • Лабораторная работа 2: electron графическое приложение.
  • Лабораторная работа 3: electron графическое приложение.
  • Лабораторная работа 4 (*): мобильное приложение на ReactNative (Android, iOS).

Литература и ссылки

Определение

Кроссплатформенное ПО - ПО, которое работает на более чем одной платформе или операционной системе с возможностью перекомпиляции, но без изменения исходного кода.

Технологии обеспечения кроссплатформенной поддержки

Виртуальная машина

Реализует специфику платформы, но при этом позволяет транслировать программу в свой внутренний формат и запускать приложение под платформу.

Пример: Java Virtual Machine.


package ru.petrsu.cross;

public class HelloWorld {

	public static void main(String[] args) {
		say("Hello");
		say("World!");
	}

	public static void say(String str) {
		System.out.println(str);
	}
}
					

					    $ javac HelloWorld.java
					    $ javap -c HelloWorld
					

Compiled from "HelloWorld.java"
public class ru.petrsu.cross.HelloWorld {
  public ru.petrsu.cross.HelloWorld();
    Code:
       0: aload_0
       1: invokespecial #1                  // Method java/lang/Object."":()V
       4: return

  public static void main(java.lang.String[]);
    Code:
       0: ldc           #2                  // String Hello
       2: invokestatic  #3                  // Method say:(Ljava/lang/String;)V
       5: ldc           #4                  // String World!
       7: invokestatic  #3                  // Method say:(Ljava/lang/String;)V
      10: return

  public static void say(java.lang.String);
    Code:
       0: getstatic     #5                  // Field java/lang/System.out:Ljava/io/PrintStream;
       3: aload_0
       4: invokevirtual #6                  // Method java/io/PrintStream.println:(Ljava/lang/String;)V
       7: return
}

Кроссплатформеная библиотека

Реализует множество возможностей, и позволяет писать код без адаптации к системе (системозависимые части реализуются на уровне библиотеки).

Пример: Qt и Boost.

Web-Технологии

Разработка с помощью HTML, CSS и javascript на готовом визуализаторе одного из браузеров.

Пример: Electron, Enyo

Мобильная разработка

Разработка единой кодовой базы для платформ с последующей компиляцией и созданием приложений под каждую отдельную платформу (Android, iOS, Windows Phone).

Пример: React Native

Платформа Node.js

  • Javascript: миграция из браузера на сервер.
  • Google Chrome V8.
  • Быстрота и простота.
  • Наличие большого количества библиотек.

Javascript

  • Стандарт ECMA-262
  • Google Chrome V8.
  • Firefox SpiderMonkey.
  • Safari JavaScriptCore (Nitro).

Создание объектов: prototype


					
function Lang(code) {
    this.code = code;
   
    this.getCode = function() {
	return this.code;
    }
}

let ru = new Lang("ru");
console.log(ru.getCode());				    

let en = new Lang("en");
console.log(en.getCode());				    
					

function Lang(code) {
  this.code = code;
}

Lang.prototype.getCode = function(){
 return this.code;
}

let ru = new Lang("ru");
console.log(ru.getCode());

Создание объектов: class


					
class Lang {
    constructor(code) {
	this.code = code;
    }
    getCode() {
	return this.code;
    }
}

let ru = new Lang("ru");
console.log(ru.getCode());				    

let en = new Lang("en");
console.log(en.getCode());

LIFE (Immediately Invoked Function Expression)


					(function () 
					    {console.log("From function") })
					();

Замыкания


function Lang(code) {  
    var displayCode = function(str) {
	console.log(str + ' ' + code);
    }
    return displayName;
}

var myFunc = Lang('ru');

myFunc('Code ');
myFunc('Your code ');

Событийно-ориентированный подход

  • Традиционный подход: по умолчанию инструкция блокирующая.
  • Асинхронное программирование.
  • Передача функции обратного вызова (callback).

Запрос к сети на языке PHP


                    // Request to SMS gateway.
                    $client = new \GuzzleHttp\Client();
                    $data = array('login' => $login, 'psw' => $psw, 'fmp' => 2,
                        'phones' => $phones, 'mes' => 'Вам сообщение:','charset' => 'utf-8');
                    $res = $client->request('GET', 'https://smsc.ru/sys/send.php', [
                        'query' => $data
                    ]);

                    Log::info((string)$res->getBody());

Запрос к сети на языке JavaScript


        // Get html table with parameters.
        $.post('/api/save_block_instance_data', $("#save_block_instance_form_" + biId).serializeObject(), function(result) {
            $("#save_block_instance_data_button_" + biId).button('reset');
            if (result.result == 'ok') {
                $.notify("Данные успешно сохранены!", "success");
            }
        }.bind(this));

Использование таймеров


					setTimeout(function () {
					    window.location.reload();
					}, 2000);