Пишем полноценное приложение на React с нуля за час

Курс будет проходить по схеме 1 + 5 + 4, т.е. организационое собрание перед первой встречей. Затем мы с вами пройдем 2 блока (5 занятий), на которых разберем продвинутый Redux и экосистему React, построим админку для нашего приложения. Сделаем каникулы, во время которых вы сможете освоиться с пройденным материалом. На следующих 3-х уроках мы будем создавать мобильное приложение на React Native, с исползованием MobX, настроим коммуникацию с сервером и авторизацию, посмотрим на пример работы с real-time в MobX и Redux-Saga. А последние занятие мы посвятим вашим вопросам и увидим куда развиваться дальше.

На каждом занятии мы изучаем что-то новое. После встречи даётся домашнее задание.

На следующем занятии мы смотрим, что и как получилось решить и как сделать лучше. Чтобы получить от курса максимум результата, нужно не только слушать, но и делать что-то дома, а затем – показывать преподавателю. Так, постепенно, с обратной связью от преподавателя, вы действительно хорошо разберётесь c этими технологиями.

Обратите внимание: это наш первый набор на данный курс. Это значит, что людей будет меньше и мы с вами будем активно общаться по всем материалам. Также мы планируем повысить стоимость этого курса в будущем и сейчас вы можете пройти его дешевле. Однако программа еще не обкатана и после каждого урока я буду просить у вас заполнять форму обратной связи для улучшения программы и ее подачи.

Build native mobile apps using JavaScript and React

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

import React,{ Component }from’react’;import{ Text, View }from’react-native’;classWhyReactNativeIsSoGreatextendsComponent{render(){return(<View><Text> If you like React on the web, you’ll like React Native.</Text><Text> You just use native components like ‘View’ and ‘Text’, instead of web components like ‘div’ and ‘span’.</Text></View>);}}

A React Native app is a real mobile app

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

import React,{ Component }from’react’;import{ Image, ScrollView, Text }from’react-native’;classAwkwardScrollingImageWithTextextendsComponent{render(){return(<ScrollView><Image source={{uri:’https://i.chzbgr.com/full/7345954048/h7E2C65F9/’}} style={{width:320, height:180}}/><Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React.</Text></ScrollView>);}}

Don’t waste time recompiling

React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly.

Документация по React Native

With Hot Reloading, you can even run new code while retaining your application state. Give it a try — it’s a magical experience.

Use native code when you need to

React Native combines smoothly with components written in Objective-C, Java, or Swift. It’s simple to drop down to native code if you need to optimize a few aspects of your application. It’s also easy to build part of your app in React Native, and part of your app using native code directly — that’s how the Facebook app works.

import React,{ Component }from’react’;import{ Text, View }from’react-native’;import{ TheGreatestComponentInTheWorld }from’./your-native-code’;classSomethingFastextendsComponent{render(){return(<View><TheGreatestComponentInTheWorld /><Text> TheGreatestComponentInTheWorld could use native Objective-C, Java, or Swift — the product development process is the same.</Text></View>);}}

Get Started with React Native

Who’s using React Native?

Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you’re curious to see what can be accomplished with React Native, check out these apps!

More React Native apps

Андроид игры и приложения на HTML+JS+CSS возможно ли?

Подробности
Категория: Разработка
Опубликовано 18.09.2014 08:11

Интересует ли вас можно ли делать приложения и игры для Android на платформе HTML с помощью стилей CSS и вычислений Javascript?

8 бесплатных обучалок фреймворку React.js

Ну раз вы сейчас читаете эти строки, то наверняка вам это интересно. Поехали…

В этом материале вы сможете узнать о том как делать HTML приложения и игры на Андроид, какими инструментами пользоваться. Плюсы и минусы и всё в этом духе.

Во-первых приложения и игры на HTML+CSS+JS очень даже можно делать для Андроида. Главное только захотеть.

Тут можно пользоваться либо готовыми фреймворками для построения игр на Android (+куча других платформ) ну или делать всё ручками. Как становиться понятно первый способ это такой более шаблонный путь с шаблонными настройками и отсутствием полного контроля происходящего. Грубо, дерзко, быстро. Как топором по хлебу. Второй способ лишён этих весьма ощутимых недостатков, но подразумевает потрату большего времени (с нами у вас много времени это не займёт), но финишный продукт будет на ПОРЯДОК качественнее, оптимизированнее и круче. А ведь ради качества всё должно делаться.

Давайте рассмакуем эти два пути.

1. Фрейморк + HTML + CSS + JS

Для того чтобы быстро портировать с HTML в APK игру можно использовать своего рода фрейморк для этого заточенный. Такими являются PhoneGap и IndelXDK. Первый мне к счастью не довелось опробовать, а вот второй к сожалению да.

Какие от этого всего впечатления? Сыро. Плохо. Очень плохо.

На самом деле я не знаю кто использует эти продукты, но они выдают в итоге намного меньшее качество, чем если бы я установил  Android SDK и сам всё начал запиливать и разбираться в низкоуровневом устройстве создания APK приложений. Лучше потратить немногим больше времени и игра не будет тормозит будет меньше занимать объём, будет легче её обновлять, связывать с Android функциями и тд.

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

— Тормознутость. Из-за большого количества навешанных, но неиспользуемых библиотек производительность может весьма опечалить.

— Ограниченность. Вы всё время ограничены в кастомизации настроек вашего приложения. Хотите поставить рекламу? ОГРАНИЧЬТЕСЬ!

— Размер. Конечный APK файл с приложением HelloWord был больше 6Мб (IntelXDK)

Плюс только один

+ Разом на все платформы (Хоть криво и косо)

2. Android SDK + HTML + CSS + JS

Это уже совсем другой расклад. Хоть здесь придётся поработать ручками, зато вы получаете продукт совершенно другого качества. И это факт!

Итак, на чём же выполняется работа?

Для создания и связки проекта HTML с Андроидом используется Android SDK с Eclipse который туда входит. Если вы думаете что нужно быть каким-то JAVA-программистом чтобы делать таким образом приложения или игры — вы ошибаетесь. Достаточно практически копи-пастом определённые отрывки кода скопировать в Android-проект, понять зачем вы это скопировали (это нетрудно, мы объясним) и у вас получится что-то вроде шаблона куда вы потом можете вставлять любые игры и приложения написанные на HTML.

Как выглядит с технического окна весь процесс?

Как же это работает всё может возникнуть вопрос у человека, который задумал создать своё игру на HTML под Android.

Давайте разберёмся немного в последовательности действий:

1. Создание проекта в Eclipse (Ниже подробнее)

2. Создание проекта на HTML

3. Всовываем HTML в Android и отлаживаем

4. Экспортируем и подписываем приложение

5. Оптимизируем утилитой zipaling

6. Регистрируемся в Google Play 

7. Там же опубликовываем приложение

Вот так делается игра без Android-фреймворков. От А до Я. Мы расписали самым подробным образом как сделать таким способом приложение или игру (фактически шаблон с Android стороны куда вы можете всовывать любой HTML проект попутно настраивая мелкие детали Android шаблона под нужды приложения/игры).

Если вы заинтересовались этой темой, значит вам интересно что поддерживает из HTML-технологий мобильная платформа и насколько успешно? Думаю я угадал, давайте коснёмся этой темы.

Итак, каким фреймворком и технологией делать игру или приложение на HTML?

Canvas

Очень глючен на андроиде любой версии. Мягкости нет никакой. Подёргивается порой даже на разрешении 320×480, не говоря уже о планшетах (с ростом разрешения производительность канваса теряется).

Однако на Canvas как раз делаются игры и есть очень хороший фреймворк под названием . В сети есть  на этом фреймворке из которого можно немного обучиться.

SVG

Несмотря на то что технология поддерживается давно, а SMIL анимация с Android 3.0, нет тоже стабильности в работе.

Много почему-то не работает. Ведёт себя порой загадочно. Для анимирования мало подойдёт.

JS

Подерживается всеми версиями андроида и очень на славу используется практически везде.

CSS

Начиная с Android 3.0 поддерживается CSS3 со всеми фичами. Анимация работает очень плавно и хорошо. На данный момент лучше всего анимировать обхекты и что-либо делать основываясь на возможностях CSS.

.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *