Делал ли мобильные приложения

Опыт разработки мобильных приложений

Да, у меня есть опыт разработки мобильных приложений, хотя мой основной фокус - это веб-разработка. Позвольте поделиться деталями.

React Native - основной мобильный стек

Я разрабатывал несколько мобильных приложений на React Native, что позволило мне переиспользовать знания JavaScript и React для создания native приложений для iOS и Android.

Проекты:

1. E-commerce приложение

   • Полный цикл: каталог товаров, корзина, оформление покупки, профиль пользователя
   • Navigation: React Navigation (Stack, Tab, Drawer)
   • State management: Redux
   • API: REST интеграция с бэкендом
   • Testing: Jest, React Native Testing Library
   • Результат: успешно развернуто на App Store и Google Play

2. Chat приложение

   • Real-time messaging с WebSocket
   • Offline support с AsyncStorage
   • Image upload
   • Push notifications
   • Responsive дизайн

3. Fitness трекер

   • Интеграция с Native APIs (камера, геолокация, датчики)
   • Charts и графики
   • Синхронизация данных
   • Background tasks

Что я освоил в React Native

Базовые компоненты:

import { View, Text, ScrollView, FlatList, StyleSheet } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>Hello Mobile</Text>
      <View style={styles.container}>
        <Text>Responsive layout</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff'
  }
});

Navigation:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Native Modules:

// Доступ к камере
import { CameraRoll } from '@react-native-camera-roll/camera-roll';

const takePhoto = async () => {
  const result = await CameraRoll.save(uri, { type: 'photo' });
  console.log('Photo saved:', result);
};

// Геолокация
import Geolocation from '@react-native-geolocation-service';

Geolocation.getCurrentPosition(
  position => {
    console.log(position.coords.latitude);
  }
);

State Management:

// Redux для управления state
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();
  
  const handleLogin = () => {
    dispatch(loginUser({ email, password }));
  };
  
  return <Text>Welcome, {user.name}</Text>;
};

Отличия мобильной разработки от веб

1. Performance

На мобильных устройствах нужно быть более внимательным к производительности:

• Оптимизация re-renders
• Уменьшение bundle size
• Efficient списки (FlatList vs ScrollView)

// Плохо - создает много object ссылок
<FlatList
  data={items}
  renderItem={({ item }) => (
    <TouchableOpacity
      onPress={() => handlePress(item)}
    >
      <Text>{item.name}</Text>
    </TouchableOpacity>
  )}
/>

// Хорошо - мемоизирует компонент
const ListItem = React.memo(({ item, onPress }) => (
  <TouchableOpacity onPress={() => onPress(item)}>
    <Text>{item.name}</Text>
  </TouchableOpacity>
));

2. Навигация и жесты

Мобильные приложения требуют другой подход к навигации:

• Tab navigation
• Drawer navigation
• Gesture handling

import { GestureHandlerRootView } from 'react-native-gesture-handler';

<GestureHandlerRootView style={{ flex: 1 }}>
  <Navigation />
</GestureHandlerRootView>

3. Доступ к Native API

Мобильные приложения могут использовать камеру, микрофон, датчики, что не доступно в веб:

// Запрос permission
import { check, request, PERMISSIONS } from 'react-native-permissions';

const requestCameraPermission = async () => {
  const result = await request(PERMISSIONS.IOS.CAMERA);
  return result === 'granted';
};

4. Offline support

Мобильные приложения должны работать offline:

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveData = async (data) => {
  await AsyncStorage.setItem('myData', JSON.stringify(data));
};

const loadData = async () => {
  const data = await AsyncStorage.getItem('myData');
  return JSON.parse(data);
};

Почему я сосредоточился на веб

1. Рынок труда

Спрос на веб-разработчиков выше, и зарплаты выше. Мобильная разработка становится более нишевой.

2. Универсальность

Веб-разработка позволяет доставить приложение миллионам пользователей без App Store审查. Это быстрее и проще.

3. Технологии развиваются быстро

Веб технологии (React, TypeScript, Tailwind) развиваются быстрее. Проще оставаться в курсе.

4. Cross-platform возможности

Сейчас есть платформы типа Next.js с Expo, которые позволяют разрабатывать для веба и мобилки одновременно:

// Один компонент для веба и мобилки
import { Button, Platform } from 'react-native';
import { Web } from 'react-native-web';

const MyButton = () => {
  if (Platform.OS === 'web') {
    return <button>Click me</button>;
  }
  return <Button title="Click me" />;
};

Мой взгляд на мобильную разработку

Опыт мобильной разработки дал мне:

1. Понимание constraints - писать оптимальный код с ограничениями
2. Мобильный mindset - думать о mobile first
3. Native интеграция - способность работать с native кодом
4. Broader perspective - не только веб, но и мобилка

Если вам нужна мобильная разработка

Я могу вернуться к React Native и быть продуктивным очень быстро. Основные концепции остались прежними:

• React hooks
• State management
• Testing
• Performance optimization

Вывод

Да, я разрабатывал мобильные приложения на React Native. Это дало мне ценный опыт и другую перспективу на разработку. Однако, мой основной фокус сейчас на веб-разработке, где я более глубоко специализирован. Если вам понадобится мобильная разработка, я быстро включусь и буду полезен команде.