What are the difference between business logic and UI logic?

问题

I am learning state management in flutter and most of the time I encounter with words business logic ui logic and some time presentation logic, I searched it on the internet as people explain it in different languages, I couldn't get a better understanding, Could someone please show these three types of logic in the form of an example and explain it very clean and easy?

回答1:

When we use a library, it is our responsibility and mission to separate it from critical parts of our code, which is the Business Logic.
In Clean Architecture, for example, which respects those principles, the goal is to separate the concerns and roles that can be categorized into:
1) UI (User Interface)
2) Formatter (the format, the legal part, the content)
3) Business Logic (the Business rules)
4) Data (can be in-memory, networks like APIs or Online Database or local persistent store/database)

Using cross-platform/multi-platform solutions like a flutter on the UI part can be a bit more logical than on the Business part.
The Business Logic doesn't change frequently, but there might be frequent change wile developing UI.
For example, for networking calls, we can either implement this layer by ourselves or depend on a well-known library. If tomorrow a new better one shows up, we only need to replace the implementation of our layer without impacting the whole module or project.
Sometimes when a client says that app needs new UI with the same features, The might have been built at the way there must only be a change in UI mostly, without affecting the logic of features behind.
In the context of flutter, consider the example of a basic app of increment of press count, The logic should be separated (maybe in other class/file) so if we need to change pressing 1,2,3 times press to a,b,c... times press, the only business logic should be changed.
Follow The example below:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 65;
  String hello = "a";

  // the only business logic change will be here...No UI change require
  void _incrementCounter() {
    setState(() {
      hello = String.fromCharCode(_counter);
      if(_counter!=90)
        _counter++;
      else
        _counter = 65;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$hello',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Still not getting the idea, refer below:
(1), (2), (3)

来源：https://stackoverflow.com/questions/61927721/what-are-the-difference-between-business-logic-and-ui-logic

标签

Flutter

dart

bloc

flutter-bloc

flutter-state