확장 가능한 떨림 응용 프로그램 구축(구조, 스타일, 약속, 상태 관리)

2년간의 탐색을 통해 저는 본고에서 제가 배운 신축 가능한 응용 프로그램을 구축하는 가장 좋은 실천을 공유하고 싶습니다.
나는 네가 해야 할 일을 말하지 않겠지만, 네가 할 수 있는 일을 말할 것이다.이 가이드는 사용자와 다른 유지보수 응용 프로그램의 사용자가 원하는 내용을 쉽게 찾을 수 있도록 합니다.
이를 어떻게 실현할 것인가에 대해 논의해 보자는 것이다.

1) 아키텍처: 기능 기반

특성은 모든 소프트웨어 디자인의 기본 개념을 이해하는 것이다.소프트웨어 개발의 사용자 수요를 설명하는 데도 쓰인다.따라서 만약에 우리가 기능에 따라 프로젝트를 구축한다면 우리가 더 큰 단원으로 시스템을 구축할 때 프로젝트가 성장할 때 프로젝트를 관리하는 것이 더욱 쉽다.

기능별 프로젝트 구성

복잡한 응용 프로그램에서는 서로 다른 모듈이 어떻게 협업하는지 이해하기 어렵다.특성에 대한 체계 구조는 이것에 매우 도움이 된다. 왜냐하면 우리는 관련 논리 (widgets|utils|pages|stores|models|..etc)을 특성에 분류했기 때문이다.우리는 작은 부품이 어떻게 협동하여 일을 하는지를 고려할 필요가 없고, 기능이 어떻게 협동하여 응용 프로그램을 구축하는지를 고려해야 한다.기능 간의 의존 관계를 분석함으로써 이 프로그램은 개발자가 프로젝트를 배우거나 볼 수 있도록 자동으로 이해할 수 있는 도표를 생성할 수 있다.

피쳐 유형

어떤 특성이 오염되는 것을 방지하기 위해서는 이 특성의 업무 논리와 분리를 나타내는 것이 중요하다.이것이 바로 우리가 응용 프로그램을 두 개의 다른 층으로 나누어야 하는 이유이다.

인프라 기능: 응용 프로그램 업무 논리를 실현하는 모든 기능(예를 들어 신분 검증, http, 설정, 사용자, 글, 이벤트, 학교 등)을 포함한다.

어플리케이션 기능: 어플리케이션 프레젠테이션을 구현하는 모든 기능(예: 인증, 홈 페이지, 설정, 사용자, 기사, 이벤트, 학교 등)을 포함합니다.

Notice that auth, user, events, articles, …etc. features can be both infrastructure and app features, so what is the difference? that’s what we will discuss in the next section (Features anatomy).

특징 해부

인프라 기능: 유지 보수 서비스, 저장소, 모델, DTO, UTIL, 차단기, 검증기, 인터페이스 등

응용 프로그램 기능: 페이지, 위젯, 스타일, 글꼴, 색상 유지 보수.

Note: An app feature may consume multiple Infrastructure features

2) 이름 규약:파일 이름 지정

뱀 껍데기

snake case는 이름의 모든 알파벳을 소문자로 지정하고 이름의 단어를 밑줄로 구분하는 이름입니다.또한 Angular에서는 파일 이름, 유형 및 확장자를 구분하는 데 사용되는 점이 있습니다.file_name.type.dart파일 이름에 유형을 포함시키면 텍스트 편집기나 IDE를 사용하여 특정 파일 유형을 쉽게 찾을 수 있습니다.
가장 일반적인 파일 유형은 입니다.작은 부품.풍격서비스사이즈.util.상점.

Create additional type names if you must but take care not to create too many.

예.

file_name.widget.dart

file_name.style.dart

file_name.model.dart

file_name.util.dart

3) 상태 관리: 공급자 + MVVM

상태 관리는 떨림의 복잡한 화제이다.모든 상태 관리 방법은 그 특징을 가지고 사람마다 서로 다른 선호를 가지고 있다.나에게 있어서 Provider은 이해하기 쉽고 코드를 너무 많이 사용할 필요가 없기 때문에 가장 좋은 선택이다.
즉, 공급자 자체가 신축 가능한 응용 프로그램을 구축하기에 부족하기 때문에 저는 최종적으로 공급자와 MVVM 기능을 결합한 상태 관리 패키지를 구축했고 이를 PMVVM이라고 명명했습니다.

P.MVVM

PMVVM에서는 사용자가 결정하는 3가지 주요 부품이 필요합니다.이 작품들은:

보기: 애플리케이션 논리가 없는 애플리케이션 UI를 나타냅니다.ViewModel은 상태가 변경될 때 UI를 업데이트하도록 view에 공지를 보냅니다.

ViewModel: Model과 View 사이의 다리를 충당합니다.Model의 데이터를 변환하고 View의 이벤트를 저장합니다.

모델: 응용 프로그램 데이터와 업무 논리를 저장합니다.그것은 로컬 및 원격 데이터 소스, 모델 클래스, 저장소 등 업무 논리로 구성되어 있다.그것들은 보통 간단한 종류다.

우세하다✔️

코드는 테스트하기 쉽습니다.

당신의 코드를 더욱 결합시킵니다(최대 장점)

패키지 구조는 내비게이션이 더욱 쉽다.

서비스 용이성

팀은 새로운 기능을 더욱 빠르게 추가할 수 있습니다.

언제 사용합니까?👌
간단하게 보기 위해서 당신의 작은 위젯에 자신의 이벤트가 있으면 상태를 직접 바꿀 수 있습니다. 예를 들어 페이지, 게시물 등은 MVVM을 사용합니다.기다린다
일부 주석

View 직접 액세스 불가능 Model

View 애플리케이션 논리 없음

ViewModel은 여러 개의 View이 있을 수 있다.

사용법

1. 당신의 ViewModel을 구축합니다.

    class MyViewModel extends ViewModel {
      int counter = 0;

      // Optional
      @override
      void init() {
        // It's called after the ViewModel is constructed
      }

      // Optional
      @override
      void onBuild() {
        // It's called everytime the view is rebuilt
      }

      void increase() {
        counter++;
        notifyListeners();
      }
    }

context의 ViewModel에 직접 액세스할 수도 있습니다.

    class MyViewModel extends ViewModel {
      @override
      void init() {
        var height = MediaQuery.of(context).size.height;
      }
    }

2. 작은 부품에 MVVM을 성명한다.

    class MyWidget extends StatelessWidget {
      const MyWidget({Key key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return MVVM<MyViewModel>(
          view: (context, vmodel) => _MyView(),
          viewModel: MyViewModel(),
        );
      }
    }

3. 당신의 View을 세우세요.

    class _MyView extends StatelessView<MyViewModel> {
      /// Set [reactive] to [false] if you don't want the view to listen to the ViewModel.
      /// It's [true] by default.
      const _MyView({Key key}) : super(key: key, reactive: true); 

      @override
      Widget render(context, vmodel) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(vmodel.counter.toString()),
            SizedBox(height: 24),
            RaisedButton(onPressed: vmodel.increase, child: Text('Increase')),
          ],
        );
      }

For more details, head to the package documentation

P.MVVM, 웹, 모바일 및 데스크탑 모두에 사용 가능

pmvvm은 특히 응용 프로그램이 여러 플랫폼에서 실행될 때 완벽하게 실행할 수 있다.모든 뷰를 제어하는 단일 뷰 모델만 생성하면 됩니다.

4) 스타일

Flatter에서는 색상, 문자열, 텍스트 스타일 및 주제에 대한 파일을 자주 만듭니다.이런 방식을 통해 모든 이 값들은 쉽게 찾을 수 있는 곳에 저장되기 때문에 프로그램을 유지하는 사람들의 생활을 더욱 수월하게 할 수 있을 것이다.

기능적인 스타일링

우리는 app-wide 색상, 글꼴, 테마, 애니메이션을 styles이라는 응용 프로그램 기능으로 나누어야 한다.이런 방법은 프로그램의 모든 작은 위젯에 단일 원본의 스타일을 사용하게 할 것이다.
예:colors.style.dart

    abstract class CColors {
      static const white0 = Color(0xffffffff);
      static const black100 = Color(0xff000000);
      static const blue10 = Color(0xffedf5ff);
      static const blue20 = Color(0xffd0e2ff);
      static const blue30 = Color(0xffa6c8ff);
    }

text.style.dart

    abstract class CFonts {
      static const primaryRegular = 'IBMPlexSans-Regular';
      static const primaryLight = 'IBMPlexSans-Light';
      static const primaryMedium = 'IBMPlexSans-Medium';
      static const primarySemibold = 'IBMPlexSans-SemiBold';
      static const primaryBold = 'IBMPlexSans-Bold';
    }

More examples can be found Here

작은 위젯 스타일

작은 위젯이 복잡하고 특정한 조작에 기반한 반응 행위가 있다면 (예를 들어 단추를 눌렀을 때 배경 색깔이 변할 수 있음) 작은 위젯의 색깔과 레이아웃 변수를 작은 위젯 코드와 분리해야 할 수도 있습니다.
예:tile.style.dart

    abstract class TileStyle {
      static const Map<String, dynamic> layouts = {
        'tile-padding': const EdgeInsets.all(16),
      };
      static const Map<String, Color> colors = {
        'tile-enabled-background-color': CColors.gray90,
        'tile-enabled-label-color': CColors.gray30,
        'tile-enabled-title-color': CColors.gray10,
        'tile-enabled-description-color': CColors.gray30,
        //
        'tile-disabled-background-color': CColors.gray90,
        'tile-disabled-label-color': CColors.gray70,
        'tile-disabled-title-color': CColors.gray70,
        'tile-disabled-description-color': CColors.gray70,
      };
    }

tile.widget.dart

 class CTile extends StatelessWidget {
  const CTile({
    Key? key,
    this.enable = true,
    ...
  }) : super(key: key);

  final bool enable;

  final _colors = CTileStyle.colors;
  final _layouts = CTileStyle.layouts;

  @override
  Widget build(BuildContext context) {
    /// styles helpers
    String cwidget = 'tile';
    String state = enable ? 'enabled' : 'disabled';

    return IgnorePointer(
      ignoring: !enable,
      child: Container(
        color: _colors['$cwidget-$state-background-color'],
        padding: _layouts['$cwidget-padding'],
        child: ....,
      ),
    );
  }
}

More examples can be found Here

결론

본고에서 우리는 대형 응용 프로그램 개발에 필요한 네 가지 주요 부분을 소개했다.
요약은 다음과 같습니다.

은 어플리케이션을 공동 작업으로 구성하는 기능을 제공합니다.

은 파일 이름을 사용하여 각dart 파일의 유형을 정의합니다.타자를 치다.던지다.

은 BloC와 같은 다른 대안보다 MVVM을 사용하여 상태를 관리하기 쉽습니다.

은 작은 위젯 스타일과 표시 코드를 분리합니다.

소스 코드

본문의 완전한 예는 here에서 찾을 수 있다